jQuery datepicker loses focus after .("show")

Question

I'm using the range date-picker of jQuery UI. When selecting the "from date", I want to open automatically the "to date" date-picker. So, I call the .datepicker("show"). The "to date" picker is showing for a second and immediately fade away. Surprisingly, if I go to another application and then come back and focus on the browser window, the "to date" picker is shown. I also tried to add the $('#toDate').focus(); but it didn't help.

$( ".fromDatePicker" ).datepicker({
    defaultDate: "+1w",
    dateFormat: 'dd/mm/yy',
    altFormat: 'yymmdd',
    altField: "#fromDateFormatted",
    numberOfMonths: 2,
    showOn: "both",
    buttonImage: "images/calender_icon_a1.jpg", 
    buttonText: "open calendar",
    buttonImageOnly: true,
    onSelect: function( selectedDate ) {
        $('#toDate').datepicker( "option", "minDate", selectedDate );
        $('#toDate').datepicker("show");
        //$('#toDate').focus();  //commented cause it's not working
    }
});

See if this helps : http://stackoverflow.com/questions/2386718/jquery-live-failing-with-jquery-ui-datepicker — yoda, Sep 26 '11 at 13:28

score 0 · Accepted Answer · answered Sep 26 '11 at 14:13

The reason for the flashing appearance is because show would be called before minDate finishes. This would confuse datepicker when triggering beforeShowDay event just before showing the picker.

One somewhat hacky workaround is to delay the call to show the datepicker. For example, something like the following would work:

onSelect: function( selectedDate ) {
    $('#toDate').datepicker( "option", "minDate", selectedDate );
    setTimeout(function() { $('#toDate').datepicker("show") }, 50);
}

See this in action: http://jsfiddle.net/william/PVuTC/2/.

jQuery datepicker loses focus after .("show")

1 Answers1