jquery datepicker - 在选择时激活另一个日期选择器

Question

我有 2 个 jquery datepickers 来选择一个日期范围。

一旦我选择了一个起始日期（从第一个日期选择器开始），我想激活第二个（到）日期选择器。

下面的代码可以做到这一点，但由于某种原因立即关闭了日期选择器。

有什么想法吗？ - http://jsfiddle.net/rN4zu/

From <input type="text" id="dateFrom" />
To <input type="text" id="dateTo" /> 

jQuery

$( "#dateFrom" ).datepicker({
    minDate: 0,
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk',
    onSelect: function( selectedDate ) {
        $( "#dateTo" ).datepicker("option", "minDate", selectedDate ).focus();
    }
});

$( "#dateTo" ).datepicker({
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk'
});

Answer 1

http://jsfiddle.net/8YTKR/

问题与命令相互冲突有关。 set min date 命令和.focus 同时发生，导致问题。

好的，首先.focus 不是触发日期选择器的首选方式。首选方法是使用类似于.datepicker('show'); 的数据选择器显示方法。所以在这个例子中，我们将使用它。

接下来我们需要确保'show' 出现在 min date 命令之后。因为该命令没有回调，所以我将使用 setTimeout

$( "#dateFrom" ).datepicker({
    minDate: 0, 
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk',
    onSelect: function( selectedDate ) {
        $( "#dateTo" ).datepicker("option", "minDate", selectedDate );
        setTimeout(function(){
            $( "#dateTo" ).datepicker('show');
        }, 16);     
    }
});

$( "#dateTo" ).datepicker({
    maxDate: "+2Y",
    showWeek: true,
    weekHeader: 'Wk'
});

为什么要说 16 毫秒？因为它可能是最长的延迟而不显示在屏幕上。由于这个原因，16ms 是默认的 jquery 动画间隔。

Answer 2

$( "#dateTo" ).datepicker("option", "minDate", selectedDate ).focus(0);

Answer 3

我的建议是允许用户在任一日期选择器中选择他们想要的任何日期，然后在选择日期后对两个文本框进行验证。

从第一个 datepicker 中的值设置第二个 datepicker 中的日期范围的问题是，如果用户选择了 7 月 21 日，那么第二个日期选择器将从 July 21 开始，但是当他们去将第一个日期选择器更改为 7 月 1 日，第二个日期选择器将停留在 7 月 21 日之后的日期