jquery datepicker - 在select上激活另一个datepicker

Tom*_*Tom 1 javascript jquery jquery-ui datepicker jquery-ui-datepicker

我有2个jquery日期选择器来选择日期范围.

一旦我选择了一个从日期(从第一个datepicker),我想激活第二个(to)datepicker.

下面的代码可以做到这一点,但由于某些原因,立即关闭了datepicker.

有任何想法吗?- http://jsfiddle.net/rN4zu/

From <input type="text" id="dateFrom" />
To <input type="text" id="dateTo" /> 
Run Code Online (Sandbox Code Playgroud)

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'
});
Run Code Online (Sandbox Code Playgroud)

Fre*_*all 9

http://jsfiddle.net/8YTKR/

问题与相互增加的命令有关.设置的最小日期命令.focus正在同时发生,这是导致问题的原因.

好的,首先.focus不是触发datepicker的首选方式.首选方法是使用看起来像这样的datapicker show方法.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'
});
Run Code Online (Sandbox Code Playgroud)

你为什么说16ms?因为它最长的延迟可能没有它出现在屏幕上.出于这个原因,16ms是默认的jquery动画间隔.