添加出发日期 javascript

Question

请看下面的javascript代码：

// Default calendar namespaces
    var dateFormat = "<span class='day'>d</span> <span class='month'>M</span> <span class='year'>yy</span>",
        dateArrival = '#dateArrival input',
        dateDeparture = '#dateDeparture input',
        dateArrivalVal = '#dateArrival .date-value',
        dateDepartureVal = '#dateDeparture .date-value';

    // Show arrival calendar
    $(dateArrival).datepicker({
        minDate: 'D',
        dateFormat: dateFormat,
        // get value on selected date for departure
        onSelect: function (txt, inst) {
            $(dateDepartureVal).html(txt);
            $(dateArrivalVal).html($(dateArrival).val());
        },
        onClose: function (selectedDate) {
            $(dateDeparture).datepicker("option", "minDate", selectedDate);
        }
    });

    // Show departure calendar
    $(dateDeparture).datepicker({
        minDate: 'D+1',
        dateFormat: dateFormat,
        // get value on selected date for return
        onSelect: function (txt, inst) {
            $(dateDepartureVal).html(txt);
            $(dateDepartureVal).html($(dateDeparture).val());
        }
    });

    // set current date
    $('.datepicker').datepicker('setDate', 'today');
    // get current value from departure 
    $(dateArrivalVal).html($(dateArrival).val());
    // get current value from return
    $(dateDepartureVal).html($(dateDeparture).val());

如您所见，它是一个预订小部件，将当天显示为入住，第二天显示为退房。但是，当客户选择另一天入住时，退房设置为同一天。我想要做的是，如果选择 dateArrival 为 6 月 7 日，dateDeparture 会自动显示 6 月 8 日（即 dateArrival + 1 天），而不是显示相同的日期（6 月 7 日）。怎么可能做到这一点？

非常感谢！

Answer 1

你可以：

1. 在到达日期注册一个更改事件，该事件设置在 D+1 检查 jQuery .change() 出发
2. 在出发日期注册一个更改事件，这将删除以前的处理程序jQuery .off

但这里的技巧是 datepicker 中没有任何方法可以帮助您将 +1 天设置为任意日期，因此您必须直接操作格式化字符串。 我添加了 3 行来生成 +1 天字符串，第四行使用 datepicker 方法设置 dateDeparture。它已经过测试，因此请检查它是否适合您

// Show arrival calendar
$(dateArrival).datepicker({
    minDate: 'D',
    dateFormat: dateFormat,
    // get value on selected date for departure
    onSelect: function (txt, inst) {
        $(dateDepartureVal).html(txt);
        $(dateArrivalVal).html($(dateArrival).val());
        // ADDED THESE FIVE LINES
        var d = new Date((+inst.currentMonth+1) + '/' + inst.currentDay + '/' + inst.currentYear)
        var dpo = new Date(d.getTime() + 24*60*60*1000)
        var str = "<span class=day>"+dpo.getDate()+"</span> <span class=month>"+(dpo.toDateString().split(' ')[1])+"</span> <span class=year>"+dpo.getFullYear()+"</span>"
        $(dateDeparture).datepicker('setDate', str);
        $(dateDepartureVal).html(str);
    }
    // REMOVED USELESS ONCLOSE, SINCE UI IS CLOSED ON SELECT
});