jQueryUI datepicker - second instance flashes then disappears when show() is called

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 cal开发者_如何学Cling 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

Instead of showing the datepicker in the onSelect use the onClose event.

jQuery("#departureDate").datepicker({

            numberOfMonths: 3,
            constrainInput: true,
            dateFormat: 'dd/mm/yy',
            showButtonPanel: false,
            hideIfNoPrevNext: true,
           onClose:function()
                 { 
               jQuery('#returnDate').datepicker('show');       
               }
        });


        jQuery("#returnDate").datepicker({

            numberOfMonths:3,
            constrainInput: true,
            dateFormat: 'dd/mm/yy',
            showButtonPanel: false,
            showOn: "focus",
            hideIfNoPrevNext: true,
           defaultDate: +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

I wanted to pop up second datepicker only if a date is selected in first one. If I use onClose, the second datepicker will show up even if did not select any date.

As work around to this problem I tried following and it works.

var checkin = $('#dpd1').datepicker({
    minDate:now,
    numberOfMonths:2,
    showOn: "button",
    buttonImage: "img/calender.png",
    buttonImageOnly: true,
    onSelect: function( selectedDate ) {
        var dateObject=new Date(selectedDate);
        dateObject.setDate(dateObject.getDate()+1); 
    $( "#dpd2" ).datepicker( "option", "minDate", dateObject );
    showSecond=true;
    },
    onClose: function( selectedDate ) {
        if(showSecond===true){
            $( "#dpd2" ).datepicker("show");
            showSecond=false;
        }
    }
});

I just got the same bug in jQuery UI 1.11.0.

I found a workaround by calling a setTimeout in the onSelect datepicker method:

$('#arrival-date, #departure-date').datepicker({
    showAnim: 'slideDown',
    onSelect: function(dateText, inst){
        if($('#arrival-date').val() != '' && $(this).is('#arrival-date'))
        {
            setTimeout(function() {
                $('#departure-date').datepicker('show');
            }, 100);
        }
    }
});

Im not sure is that solution is good, did you saw what happen if you click on the first calendar, but you dont select any day, just simple click outside, and then try again to open it?

I try it and you can open the first calendar the first time, the second time you cant, you need to open the second calendar, and then you can again click on the first calendar.