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

jquery datepicker - activate another datepicker on select

本文关键字：日期 选择器 激活 另一个 jquery 选择      更新时间：2024-03-12

我有两个jquery日期选择器来选择日期范围。

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

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

有什么想法吗？-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'
});

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动画间隔。

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

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

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

相关文章：