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

Question

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

当用户选择到达日期(onSelect)时,应该发生以下几件事:

1. 到达日期后3天更新出发(现在可以使用:))
2. 将出发日期拆分为3并将每个部分添加到输入字段(请参阅小提琴中的到达日期示例)
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
});

最后，从您到达的事件处理程序中调用该函数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/