jquery datepicker - 在选择时激活另一个日期选择器 [英] jquery datepicker - activate another datepicker on select

问题描述

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

I have 2 jquery datepickers to select a date range.

一旦我选择了起始日期(从第一个日期选择器)，我想激活第二个(到)日期选择器.

Once I have selected a from date (from the first datepicker), I would like to activate the second (to) datepicker.

下面的代码就是这样做的，但由于某种原因，它会立即关闭日期选择器.

The code below does that, but for some reason closes the datepicker straight away.

有什么想法吗?- 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 同时发生，这导致了问题.

The problem has to do with commands ramping up against each other. The set min date command and .focus are happening at the same time, which is causing the problem.

好的，首先 .focus 不是触发日期选择器的首选方式.首选方法是使用 datapicker show 方法，它看起来像这样 .datepicker('show');.所以在这个例子中，我们将使用它.

Ok, so first of all .focus is not the preferred way of triggering a datepicker. The preferred way is to use the datapicker show method which looks like this .datepicker('show');. So in this example we are going to use that instead.

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

Next we need to make sure that 'show' occurs AFTER the min date command. And because that command has no callback I am going to use 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 动画间隔.

Why 16ms you say? Because its the longest delay possible without it showing up on screen. 16ms is the default jquery animate interval for this very reason.

这篇关于jquery datepicker - 在选择时激活另一个日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！