关闭第一个时如何打开第二个界面日期选择器 [英] How to open second UI Datepicker on closing the first one

问题描述

我正在尝试使用JQuery UI的日期选择器向表单添加一些功能。

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

1. 将出发日期更新为到达日期后3天(现在有效：)
2. 将出发日期一分为三，并将每个部分添加到一个输入域中(请参阅小提琴中的到达日期示例)
3. 当到达日期取件器关闭(onClose)时，出发日期取件器应自动打开，默认为第一点中选择的日期(例如：http://www.kayak.es)

我设法让第一点起作用了，但我对其他功能有点迷茫。如果有人能告诉我怎么做，或者让我走上正轨，那就太好了！我还是个初学者，但学得很快。

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

推荐答案

将出发日期分成3个部分，然后添加 将每个部分添加到一个输入字段

看起来您已经在目标Datepicker的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/

这篇关于关闭第一个时如何打开第二个界面日期选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！