Datepicker隐藏日历以显示月-年和完整日历不能正常工作
我的表单中有两个字段，一个显示仅显示月份和年份的日期选择器，另一个显示完整的日历。
From <input type="text" name="startdate" id="datepicker"/>
To <input type="text" name="enddate" id="datepicker1"/>javascript是：
$('#datepicker').datepicker( {
changeMonth: true,
changeYear: true,
showButtonPanel: true,
dateFormat: 'mm-yy',
onChangeMonthYear: function(year, month, widget) {
$('.ui-datepicker-calendar').hide();
},
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));
},
}).click(function(){
$('.ui-datepicker-calendar').hide();
});
$('#datepicker1').datepicker( {
changeMonth: true,
changeYear: true,
dateFormat: 'dd/mm/yy',
}).click(function(){
$('.ui-datepicker-calendar').show();
});到目前为止，这两个日历都工作得很好。但是，当我们更改第一个日历的月份或年份时，将显示完整的日历！我尝试在onChangeMonthYear中添加隐藏日历，但不起作用！
JS Fiddle link
回答 3
Stack Overflow用户
发布于 2014-07-15 16:03:50
您所做的是一个技巧，您试图在显示月份或年份时隐藏日历部分，但在日期选择器显示之前触发自定义onChangeMonthYear事件。
为了继续进一步修改，您可以使用超时来延迟
onChangeMonthYear: function(year, month, widget) {
setTimeout(function() {
$('.ui-datepicker-calendar').hide();
});
},Stack Overflow用户
发布于 2015-11-10 21:49:42
您还可以使用css隐藏日历表。此解决方案不会像setTimeout解决方案那样导致闪烁。
.ui-datepicker-calendar {
display: none !important;
}如果您有另一个带有要显示的日程表的DatePicker，请在其上添加一个click事件并设置其onChangeMonthYear事件。
$(".class").click(function () {
// eq = 2 if you already have 2 DatePickers
$("table.ui-datepicker-calendar").eq(2).prop('style', 'display: block !important');
});
onChangeMonthYear: function (year, month, inst) {
setTimeout(function() {
$(inst.dpDiv).find("table.ui-datepicker-calendar").prop('style', 'display: block !important');
});
}更新：上面的代码可以在火狐上运行，但不能在Chrome和IE上运行。
此代码适用于Firefox、Chrome和IE：
$(".class").click(function () {
// eq = 2 if you already have 2 DatePickers
$("table.ui-datepicker-calendar").eq(2).removeClass("ui-datepicker-calendar");
});
onChangeMonthYear: function (year, month, inst) {
setTimeout(function() {
$(inst.dpDiv).find("table.ui-datepicker-calendar").removeClass("ui-datepicker-calendar");
});
}Stack Overflow用户
发布于 2016-06-02 13:38:36
根据此answer，您需要将其隐藏在beforeShow中，而不是onChangeMonthYear中。首先，您需要定义一个新的css样式：
.hide-calendar .ui-datepicker-calendar {
display: none;
}在datepicker()函数的beforeShow事件中：
beforeShow: function(input, inst) {
$('#ui-datepicker-div').addClass('hide-calendar');
}https://stackoverflow.com/questions/24752611
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号