jQuery UI 2 日期选择器和范围选择

Question

我正在尝试连接 2 个日期选择器以允许用户选择日期范围。

我创建了这样的代码:

$(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);
        }
    });
});

这工作正常，但我收到奇怪的错误: 当我使用第一个输入选择第二个日期时，日期选择器显示第二个输入的日期。 我认为 onSelect 函数以某种方式根据第二个日期选择器设置日期。

如果第一个日期选择器的日期与第二个日期选择器在同一个月，则不会显示此错误。

如何重现此行为:

• 在第一个日期选择器中选择“2010-02-05”(点击第二个日期选择器的日期后，第二个月份和年份字段将更改为第二个日期选择器中的月份和年份)

这是我的 jsFiddle: http://jsfiddle.net/Misiu/TyQSG/1/

我应该如何更改 onSelect 函数来消除此错误？

Answer 1

请检查一下。我想这就是你想要的？

根据 UI 示例更改了您的代码。

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