Question

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

当用户选择到达日期（onSelect）时，应该发生以下几件事：

~~在出发日期后3天更新出发~~（现在可以使用:)）
将出发日期分成3并将每个部分添加到输入字段（参见小提琴中的到达日期示例）
当到达日期选择器关闭（onClose）时，出发日期选择器应自动打开，默认为第1点中选择的日期（例如：http://www.kayak.es）

我设法让第1点工作，但我对其他功能有点失落。如果有人能告诉我如何做到这一点或让我走上正确的轨道，这真的很棒！我还是初学者，但学得很快。

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

Answer 1

将出发日期拆分为3并添加每个部分到输入字段

看起来您已经在目标datepicker的onSelect处理程序中为此编写了代码。不幸的是，它看起来像setDate does not trigger that event，您无法手动触发它。我建议将这些代码分解为一个可以从两个地方调用的单独函数：

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
});

最后，从您到达的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），离开 - datepicker 应该自动打开，默认至第1点所选的日期

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

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

以下是您更新的示例：http://jsfiddle.net/zXMke/

Answer 2

回答标题的问题：

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

来源：

http://api.jqueryui.com/datepicker/#method-show

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点的解决方案吗？

干杯，爸爸

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

3 个答案: