如何在关闭第一个 UI Datepicker 时打开第二个 UI Datepicker

Question

我正在尝试使用 JQuery UI 的 Datepicker 向表单添加一些功能。

当用户选择到达日期 (onSelect) 时，应该发生一些事情：

1. < Strike>将出发日期更新为到达日期后 3 天（现在有效:)）
2. 将出发日期分为 3 部分，并将每个部分添加到输入字段（请参阅 Fiddle 中的到达日期示例）
3. 当到达日期选择器关闭（onClose），出发日期选择器应自动打开，默认为第 1 点中选择的日期（例如： http://www.kayak.es ）

我设法得到第 1 点到工作，但我对其他功能有点迷失。如果有人能告诉我如何做到这一点或让我走上正确的道路，那就太好了！我还是一个初学者，但学得很快。

这是我现在拥有的小提琴： http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

将出发日期分成 3 份并添加
每个部分到一个输入字段

看起来您已经在目标日期选择器的 onSelect 处理程序中为此编写了代码。不幸的是，看起来 setDate 不会触发该事件，并且您无法手动触发。我建议将该代码分解为一个单独的函数，您可以从两个地方调用该函数：

function splitDepartureDate(dateText) {
    var depSplit = dateText.split("-", 3);
    $('#alt-vertrek-d').val(depSplit[0]);
    $('#alt-vertrek-m').val(depSplit[1]);
    $('#alt-vertrek-y').val(depSplit[2]);
}

然后更改您的出发日期选择器 onSelect 处理程序以指向该函数：

$('#vertrek').datepicker({

    // Prevent selecting departure date before arrival:
    beforeShow: customRange,
    onSelect: splitDepartureDate
});

最后，从您到达的 < code>onSelect 事件处理程序：

/* snip: */

// Populate departure date field 
var nextDayDate = $('#aankomst').datepicker('getDate', '+3d');
nextDayDate.setDate(nextDayDate.getDate() + 3);
$('#vertrek').datepicker('setDate', nextDayDate);

// Manually call splitDepartureDate
splitDepartureDate($("#vertrek").val());

---

当到达日期选择器关闭时
(onClose)，出发日期选择器
应该自动打开，默认
到第 1 点中选择的日期

这只是使用 onClose 事件处理程序的问题：

onClose: function() {
    $("#vertrek").datepicker("show");
}

这是更新的示例：

Answer 2

回答标题的问题：

 $("#firsDate").datepicker('option',"onClose", function() { $( "#secondDate" ).datepicker( "show" ); });

来源：

http://api.jqueryui.com/datepicker/#method-显示

http://api.jqueryui.com/datepicker/#option-onClose

我建议使用 onSelect 而不是 onClose 事件，以确保在打开之前已选择第一个日期第二个日期选择器。

Answer 3

第3点答案：

$(function() {
  $( '#aankomst' ).datepicker({
    onClose: function(dateText, instance) {
      $( '#vertrek' ).datepicker('show');
     },      
    onSelect: function( dateText, instance ) {

      // Split arrival date in 3 input fields                        
      var arrSplit = dateText.split("-");
        $( '#alt-aankomst-d' ).val(arrSplit[0]);
        $( '#alt-aankomst-m' ).val(arrSplit[1]);
        $( '#alt-aankomst-y' ).val(arrSplit[2]);

       // Populate departure date field
       var nextDayDate = $( '#aankomst' ).datepicker('getDate', '+3d');
         nextDayDate.setDate( nextDayDate.getDate() + 3 );
           $( '#vertrek' ).datepicker( 'setDate', nextDayDate );
           }                
        });
}); 

你已经有了第2点的解决方案吗？

干杯，
爸爸