Nitish Nitish - 5 months ago 111
jQuery Question

Datepicker hide calender to show month-year and full calendar not working properly

I have two fields in my form, one displays a datepicker to show only month and year, and other show full calendar.

From <input type="text" name="startdate" id="datepicker"/>
To <input type="text" name="enddate" id="datepicker1"/>


The javascript is :

$('#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();
});


Upto this, the both calendar works fine. But when we change the month or year for the first calendar, the full calendar displays ! I tried adding hide calendar in
onChangeMonthYear
but not working !

JS Fiddle link

Answer

What you're doing is a hack, you're trying to hide the calender part when a month or year is displayed, but the custom onChangeMonthYear event fires before the datepicker displays.

To just keep further hacking it, you could use a timeout to defer

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

FIDDLE

Comments