JQuery UI 2 datepickers and range selection

Question

I am trying to connect 2 datepickers to allow the user to select a date range.

I created the following code:

$(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 a strange error: When I select a date using the first input for a second, the date picker shows the date from the second. I think that the onSelect functions somehow set the date based on the second datepicker.

If the first datepicker has a date in the same month as the second, this error is not displayed.

How to recreate this behavior:

• Select "2010-02-05" in the first datepicker (after you click on the change date of the second month and year to the month and year from the second datepicker).

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

How do I change the onSelect function to remove this error?

Answer 1

This does not solve the fact that they obviously have an error in the datepicker code, but it works.

If you set showAnim to empty, then there will be no animation, and the date from the previous calendar will not be displayed:

  showAnim:"", 

Answer 2

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

Changed your code according to the example user interface.

 $(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