jquery - 日期选择器隐藏日历以显示月年和完整日历无法正常工作

Question

我的表单中有两个字段，一个显示日期选择器以仅显示月份和年份，另一个显示完整日历。

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

Answer 1

您所做的是一种黑客行为，您试图在显示月份或年份时隐藏日历部分，但自定义 onChangeMonthYear 事件会在日期选择器显示之前触发。

为了继续进一步破解它，您可以使用超时来推迟

    onChangeMonthYear: function(year, month, widget) {
        setTimeout(function() {
           $('.ui-datepicker-calendar').hide();
        });
    },

FIDDLE