我正在尝试使用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
});
/* 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/