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

Question

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

4

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

我创建了以下代码：

$(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函数以消除此错误？

- Misiu

请查看 http://jqueryui.com/demos/datepicker/#date-range 以获取更高效的实现。 - Willem D'Haeseleer

是的，我现在看到了，这很奇怪！:s - Willem D'Haeseleer

也许这是日期选择器中的错误，而不是我的代码 :) 但这很奇怪，特别是它出现在官方页面的代码中。 - Misiu

即使在Jquery 示例中也是如此。 - Alex Ball

1

@AlexBall - 所以这不是我的代码中的错误 :) 嗯...我在想如何修复这个问题。可能需要更改datepicker代码中的某些内容 :/ - Misiu

显示剩余3条评论

2个回答

1

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

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

 showAnim:"",

- Niklas

这行代码用于限制日期范围。如果您选择了第一个日期（起始日期），那么第二个日期（结束日期）必须大于第一个日期。这行代码设置第二个日期选择器的最小日期或最大日期（数组中的第二个日期选择器）。 - Misiu

这个解决方法像应该的那样工作！ :) 感谢您的快速修复。但这并不改变日期选择器存在缺陷的事实。 - Misiu

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vins · Accepted Answer

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

根据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