[英]How to convert jQuery date picker to select only month and year?
How to convert jQuery date picker to select month and year only?. 如何将jQuery日期选择器转换为仅选择月份和年份? I tried it using date format, it working but show dates too. 我尝试使用日期格式,它工作,但也显示日期。 I am trying a way to select month and year only 我正在尝试一种只选择月份和年份的方法
I wrote code, 我写了代码,
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<script>
$(function() {
$( "#datepicker" ).datepicker({dateFormat: 'MM yy'});
});
</script>
<input type="text" id="datepicker">
Your answer is here. 你的答案就在这里。
http://jsfiddle.net/bopperben/DBpJe/ http://jsfiddle.net/bopperben/DBpJe/
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
var month = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var year = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(year, month, 1));
}
});
});
Credits to nitin from his post... jQuery UI DatePicker to show month year only 从他的帖子到nitin的信用... jQuery UI DatePicker只显示月份
This is what I did for create a dropdown instead of use datepicker. 这是我为创建下拉列表而不是使用datepicker所做的。 Just jQuery is needed. 只需要jQuery。
HTML: HTML:
<select class="form-control" id="yearMonthInput"></select>
javascript code: javascript代码:
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
for (i = new Date().getFullYear() ; i > 2008; i--) {
$.each(months, function (index, value) {
$('#yearMonthInput').append($('<option />').val(index + "_" + i).html(value + " " + i));
});
}
And looks in this way: 看起来像这样:
$(document).ready(function() {
$('#txtDate').datepicker({
changeMonth: true,
changeYear: true,
dateFormat: 'MM yy',
onClose: function() {
var iMonth = $("#ui-datepicker-div .ui-datepicker-month :selected").val();
var iYear = $("#ui-datepicker-div .ui-datepicker-year :selected").val();
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
},
beforeShow: function() {
if ((selDate = $(this).val()).length > 0)
{
iYear = selDate.substring(selDate.length - 4, selDate.length);
iMonth = jQuery.inArray(selDate.substring(0, selDate.length - 5),
$(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(iYear, iMonth, 1));
$(this).datepicker('setDate', new Date(iYear, iMonth, 1));
}
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.