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

这很好用，但我得到了奇怪的错误：当我使用第一个输入选择日期时，datepicker显示第二个日期。我认为onSelect函数基于第二个datepicker以某种方式设置日期。

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

如何重新创建此行为：

在第一个datepicker中选择“2010-02-05”（点击第二个月的日期和年度字段从第二个datepicker更改为月份和年份）

这是我的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

Answer 2

这并没有解决他们在datepicker代码中明显存在错误这一事实，但这是一个解决方法。

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

 showAnim:"",

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

2 个答案: