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

Question

我正在尝试使用JQuery UI的Datepicker将一些功能添加到窗体。

当用户选择的抵达日期（onSelect），几件事情应该发生：

1. 更新出发到抵达日期 后3天（这个工作现在:)）
2. 斯普利特出发日期为3并将每个部分添加到输入字段（参见小提琴中的抵达日期示例）
3. 当到达日期选择器关闭时（onClose），出发日期选择器应该自动打开，默认为d吃在第1点选择（例如：http://www.kayak.es）

我设法得到点1工作，但我有点与其他功能丢失。如果有人能告诉我如何做到这一点，或让我走上正确的轨道，那将是非常棒的！我仍然是初学者，但学得很快。

Here's什么，我现在有一个小提琴：http://jsfiddle.net/mattvic/B6Kax/13/

Answer 1

斯普利特3的出发日期，并添加 各部分的输入字段

看起来你已经在onSelect此编写的代码目标日期选择器的处理程序。不幸的是，它看起来像setDatedoes 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中）时，偏离日期选择器 应该自动打开，默认 到在点选择的日期1

这仅仅是一个使用onClose的事事件处理程序：

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

这是你的更新，例如：http://jsfiddle.net/zXMke/

Answer 2

点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点解？

干杯， 爸爸

Answer 3

回答标题的问题：

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

来源：

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

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

我建议为了使用，而不是onClose事件会ONSELECT确保第一日起就一直在打开第二个日期选择器之前选择。