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

前端之家收集整理的这篇文章主要介绍了javascript – 如何在关闭第一个UI时打开第二个UI Datepicker前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

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

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

最佳答案

Split the departure date in 3 and add
each part to an input field

看起来您已经在目标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]);
}

然后将您的离开datepicker 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());

When the arrival-datepicker closes
(onClose),the departure-datepicker
should open automatically,defaulting
to the date selected in point 1

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

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

这是您更新的示例:http://jsfiddle.net/zXMke/

猜你在找的jQuery相关文章