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

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

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

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

有任何想法吗？ – http://jsfiddle.net/rN4zu/

From  To  

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不是触发.focus的首选方式。 首选方法是使用datapicker show方法，它看起来像这样.datepicker('show'); 。 所以在这个例子中我们将使用它。

接下来，我们需要确保在min date命令之后发生'show' 。 因为该命令没有回调，我将使用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' }); 

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

Answer 2

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

Answer 3

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

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