jQuery UI Datepicker添加天数

Question

我正在尝试为酒店网站上的预订房间创建一些范围系统,我正在使用jQuery UI Datepicker来允许用户选择他们的入住日期.我当时想要做的是创建另一个简单的"夜数"字段并让jQuery Datepicker获取签入日期,添加夜数,并将结果日期设置为隐藏输入的值(在正确的日期)格式).它看起来像这样:

<input type="text" name="arrivalDate" class="datepicker">
<input type="text" name="numOfNights">
<input type="hidden" name="departureDate" value="arrivalDate + number of nights">

这可能吗？提前致谢.

(注意:我将从这个表单"获取"的数据库有点不稳定,除了几个可查询的值之外我无法访问它.)

Answer 1

以上代码可以实现以上代码 -

 $('input[name="arrivalDate"]').datepicker({

     //your other configurations.     

     onSelect: function(){
     var start = $('input[name="arrivalDate"]').val();
     var nights = $('input[name="numOfNights"]').val();
     var date = new Date(start);
     var d = date.getDate();
     var m = date.getMonth();
     var y = date.getFullYear();
     var edate= new Date(y, m, d+nights);
     $('input[name="departureDate"]').val(edate);
    }
 });

Answer 2

您可以更新arrivalDate datepicker的onSelect事件中隐藏字段的值.

$('#arrivalDate').datepicker({
    onSelect: function(dateStr) {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('mm/dd/yy', dateStr);
        depart.setDate(depart.getDate() + nights);
        $('#departureDate').val(depart);
     }
});

您还必须从numOfNights字段的change事件更新departureDate字段.

$('#numOfNights').change(function() {
        var nights = parseInt($('#numOfNights').val());
        var depart = $.datepicker.parseDate('mm/dd/yy', $('#arrivalDate').val());
        depart.setDate(depart.getDate() + nights);
        $('#departureDate').val(depart);
});

在这里尝试:http://jsfiddle.net/JKGvD/

如果你的arrivalDate有一个初始值,你可能想要创建一个函数并使用它来初始化departureDate.