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

Mis*_*siu 4 jquery jquery-ui jquery-ui-datepicker

我正在尝试连接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);
        }
    });
});
Run Code Online (Sandbox Code Playgroud)

这工作正常,但我得到奇怪的错误:当我使用第一个输入选择日期一秒钟,datepicker显示第二个日期.我认为onSelect函数基于第二个datepicker以某种方式设置日期.

如果第一个datepicker的日期与第二个月相同,则不会显示此错误.

如何重新创建此行为:

  • 在第一个datepicker中选择"2010-02-05"(在您点击第二个月的日期和年份字段从第二个datepicker更改为月份和年份之后)

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

我应该如何更改onSelect功能以删除此错误?

Vin*_*ins 6

请检查一下.我想这就是你想要的?

根据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 );
        }
    });
});?
Run Code Online (Sandbox Code Playgroud)

小提琴