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

【问题标题】：jQuery UI 2 datepickers and range selectionjQuery UI 2 日期选择器和范围选择
【发布时间】：2012-08-10 11:59:59
【问题描述】：

我正在尝试连接 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 函数以消除此错误？

【问题讨论】：

你到底想要什么...你能举例说明吗..
我想在选择日期后删除该日期更改。现在，如果日期选择器有我描述的不同月份/年份的错误是可见的
查看jqueryui.com/demos/datepicker/#date-range 以获得更有效的实施
@helmus - 同样的错误。在第一个日期选择器中选择一个日期，并尝试在第二个日期选择器中选择另一个月/年。选择月份后的第二个组合框将显示来自第一个选择器的月份
@AlexBall - 所以这不是我的代码中的错误 :) 嗯......我想知道如何解决这个问题。可能不得不更改日期选择器代码中的某些内容：/

标签： jquery jquery-ui jquery-ui-datepicker

【解决方案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

【讨论】：

@Vins - 我得到了同样的行为。我的范围代码工作正常，但我的问题是关于显示其他月份有 2 个日期的错误。这也存在于您的代码中
很抱歉，我无法解决您的问题。请您再详细解释一下。
打开此链接：jsfiddle.net/Misiu/TyQSG/1 当您单击带有日历显示的第一个输入弹出窗口时，顶部有 2 个下拉列表 - 一个用于几个月，一个用于几年。首先设置为“Feb”，然后设置为“2010”。现在单击日历中的任何日期。当您单击这 2 个下拉菜单时，会更改它们的值。输入中的日期选择正确，因此这更多是视觉错误。希望你能理解我的倒英文描述:)

【解决方案2】：

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

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

 showAnim:"",

【讨论】：

需要此行来确定日期范围。如果您选择第一个日期（从日期开始），那么第二个（到日期）必须更大。此行将 maxDate 的 minDate 设置为第二个（数组中的第二个）datepicker。
这个解决方法就像它应该的那样工作！ :) 感谢您的快速修复。这不会改变 datepicker 有错误的事实