4

我正在尝试连接 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);
        }
    });
});

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

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

如何重新创建此行为：

  • 在第一个日期选择器中选择“2010-02-05”（在您单击日期后第二个月份和年份字段从第二个日期选择器更改为月份和年份）

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

我应该如何更改onSelect功能以消除此错误？

4

2 回答 2

7

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

根据 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 );
        }
    });
});​

小提琴

于 2012-08-10T13:10:49.797 回答
1

这并不能解决他们在日期选择器代码中显然存在错误的事实，但这是一种解决方法。

如果将showAnim设置为空，则不会有任何动画，并且不会显示上一个日历中的日期： 

 showAnim:"",
于 2012-08-10T12:15:32.030 回答