月份和年份选择的jQuery UI DatePicker不起作用
月份和年份选择的jQuery UI DatePicker不起作用
提问于 2015-03-17 12:17:52
我使用jquery作为月份选择器，它正在工作，但唯一的问题是，如果我从calander中选择一个月，那么它会在输入字段中显示那个月，但是当我再次单击该输入字段时，它不会显示选定的月份，但它会显示当前月份。
HTML
<label for="startDate">Date :</label>
<input name="startDate" id="startDate" class="date-picker" />JS
$(function() {
$('.date-picker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'MM yy',
onClose: function(dateText, inst) {
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
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));
console.log('Done is pressed')
}
}
});
});这是我的问题的小提琴。http://jsfiddle.net/DBpJe/5103/
回答 4
Stack Overflow用户
回答已采纳
发布于 2015-03-17 12:45:46
您必须像下面这样修改beforeShow，而且由于月份名称是字符串的，所以必须有这样的数组来根据数字映射月份。
var monthNames = ["January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
beforeShow: function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
datestr = datestr.split(" ");
year = datestr[1];
month = monthNames.indexOf(datestr[0]);
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
$(".ui-datepicker-calendar").hide();
}
}这是演示1
或者，您可以使用这个更好看的方法将月份转换为数字。
function getMonthFromString(mon){
return new Date(Date.parse(mon +" 1, 2012")).getMonth()+1
}提供：所以回答
这是演示2
Stack Overflow用户
发布于 2015-10-29 05:46:41
还添加了一个新函数:限制截止日期比从日期晚，
<script type="text/javascript">
$(function() {
$( "#from, #to").datepicker(
{
dateFormat: "yy/mm",
changeMonth: true,
changeYear: true,
showButtonPanel: true,
showOn: "button",
buttonImage: "../../static/calendar.gif",
buttonImageOnly: true,
//buttonText: "Select date",
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));
function isDonePressed(){
return ($('#ui-datepicker-div').html().indexOf('ui-datepicker-close ui-state-default ui-priority-primary ui-corner-all ui-state-hover') > -1);
}
if (isDonePressed()){
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)).trigger('change');
$('.from').focusout()//Added to remove focus from datepicker input box on selecting date
}
},
beforeShow : function(input, inst) {
inst.dpDiv.addClass('month_year_datepicker')
if ((datestr = $(this).val()).length > 0) {
year = datestr.substring(datestr.length-4, datestr.length);
month = jQuery.inArray(datestr.substring(0, datestr.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker('option', 'defaultDate', new Date(year, month, 1));
$(this).datepicker('setDate', new Date(year, month, 1));
}
var other = this.id == "from" ? "#to" : "#from";
var option = this.id == "from" ? "maxDate" : "minDate";
if ((selectedDate = $(other).val()).length > 0) {
year = selectedDate.substring(selectedDate.length-4, selectedDate.length);
month = jQuery.inArray(selectedDate.substring(0, selectedDate.length-5), $(this).datepicker('option', 'monthNames'));
$(this).datepicker( "option", option, new Date(year, month, 1));
}
}
});
$("#btnShow").click(function(){
if ($("#from").val().length == 0 || $("#to").val().length == 0){
alert('All fields are required');
}
else{
alert('Selected Month Range :'+ $("#from").val() + ' to ' + $("#to").val());
}
}),
<!--reset-->
$(".reset").click(function() {
$(this).closest('form')[0].reset()
});
});
</script>Stack Overflow用户
发布于 2015-03-17 12:30:27
有一种方法可以通过将当前日期设置为日期选择器来做到这一点。
$("#datepicker").datepicker("setDate", currentDate);这是工作样例JQFAQ主题。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29098871
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号