jQuery UI 2 datepickers and range selection

Question

I'm trying to connect 2 datepickers to allow user to choose date range.

I've created code like this:

$(function() {
    var dates = $("#fromDate, #toDate").datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function(selectedDate) {
            var option = this.id == "fromDate" ? "minDate" : "maxDate",
                instance = $(this).data("datepicker"),
                date = $.datepicker.parseDate(
                instance.settings.dateFormat || $.datepicker._defaults.dateFormat, selectedDate, instance.settings);
            dates.not(this).datepicker("option", option, date);
        }
    });
});

This works fine, but I get weird error: When I select date using first input for a second that datepicker shows date from second one. I think that onSelect functions sets somehow date based on second datepicker.

If first datepicker has date in same month as second this error isn't showing.

How to recreate this behaviour:

• Select '2010-02-05' in first datepicker (after You click on date for a second month and year field change to month and year from second datepicker)

This is my jsFiddle: http://jsfiddle.net/Misiu/TyQSG/1/

How should I change onSelect function to remove this bug?

Answer 1

Please check this. I think this is what you want?

Changed your code as per UI example.

$(function() {
    $( "#fromDate" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function( selectedDate ) {
            $( "#toDate" ).datepicker( "option", "minDate", selectedDate );
        }
    });
    $( "#toDate" ).datepicker({
        dateFormat: 'yy-mm-dd',
        changeMonth: true,
        changeYear: true,
        minDate: new Date(2010, 2 - 1, 2),
        onSelect: function( selectedDate ) {
            $( "#fromDate" ).datepicker( "option", "maxDate", selectedDate );
        }
    });
});​

FIDDLE

Answer 2

This doesn't solve the fact that they clearly have a bug in the datepicker code, but it's a work around.

If you set the showAnim to empty then there won't be any animation and the date from the previous calendar won't show:

 showAnim:"",