Question

I have two jQueryUI datepickers on my page.

They’re initialised as below:

jQuery("#departureDate").datepicker({
    beforeShow: function() {
        getDatesForCalendar("outbound");
    },
    numberOfMonths: 3,
    constrainInput: true,
    dateFormat: 'dd/mm/yy',
    showButtonPanel: false,
    hideIfNoPrevNext: true,
    onSelect: function(dateText, inst) { jQuery('#returnDate').datepicker("show");  } 
});


jQuery("#returnDate").datepicker({
    beforeShow: function() {
        getDatesForCalendar("return");
    },
    numberOfMonths: 3,
    constrainInput: true,
    dateFormat: 'dd/mm/yy',
    showButtonPanel: false,
    showOn: "focus",
    hideIfNoPrevNext: true,
    defaultDate: +1
});

Before they pop up they check which dates are available to them using getDatesForCalendar(), which contains no code that should hide or show the calendars.

My problem is that when the first calendar calls up the second (which is does onSelect), the second calendar flashes up for a second and then disappears. This is a FF/Chrome only issue, it doesn’t appear to affect IE8.

I’ve tried a number of solutions including changing the tabindex (there is now none at all), disabling the show on focus functionality, and finally instead of manually calling datepicker(“show”) I’ve tried calling focus() on the field it’s tied to. Nothing has worked!

Any advice would be greatly appreciated.

Many thanks,

Jack

Answer 1

Looks like you will have to roll back to jquery ui 1.7.3 (loaded under Manage Resources in jsfiddle)

http://jsfiddle.net/6haqv/3/

Possible bug in jquery ui 1.8