javascript - 在预订小部件上向 "Check In Date"添加 2 天

Question

我的网站上有一个预订小部件，可以检查链接的预订网站上的住宿情况。

我希望“退房日期”自动比入住日期“晚 2 天”，除非用户另有选择。

例如:入住日期(用户在日历上输入)2016 年 9 月 1 日 退房日期 - 自动显示 2016 年 9 月 3 日

这是我的 iFrame 小部件的代码:

<div id="booking_widget">
<form class="formtastic" target="_blank" action="/properties/airportgamedirect?locale=en" accept-charset="UTF-8" method="get"><input name="utf8" type="hidden" value="✓">
<input type="hidden" name="locale" id="locale" value="en">
<input type="hidden" name="from_widget" id="from_widget" value="true">
<fieldset class="inputs">
<ol>
<li class="string">
<label>Check In Date</label>
<input type="text" name="check_in_date_view" id="check_in_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_in_date" id="check_in_date" value="">
</li>
<li class="string">
<label>Check Out Date</label>
<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-val="null"><img class="ui-datepicker-trigger" src="https://d3ltdu8ywan39g.cloudfront.net/assets/cal_button-27edd7f4d9f9f1a1ef085e5b4e139081.png" alt="Select a date" title="Select a date"><input type="hidden" name="check_out_date" id="check_out_date">
</li>
<li class="select_occupancies">
<label>Adults</label>
<select name="number_adults" id="number_adults"><option value="0">0</option>
<option selected="selected" value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</li>
<li class="select_occupancies">
<label>Children</label>
<select name="number_children" id="number_children"><option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option></select>
</li>
</ol>
</fieldset>
<fieldset class="actions">
<ol>
<li><input type="submit" name="commit" value=" Check Availability" class="check_availability"></li>
</ol>
</fieldset>
</form>

</div>

我试过了

<input type="text" name="check_out_date_view" id="check_out_date_view" class="calendar hasDatepicker" data-init-value="text" value="check_in_date"> 

但这只是添加文本“check_In_date”而不是上述字段中的“check_in_date”值

Answer 1

一旦用户选择日期，您必须在 checkin 日期框上设置事件监听器。你更新结帐框，像这样

$( "#check_in_date" ).change(function() {

    //add two days
    var checkoutDate = new Date($(this).val)
    checkoutDate.setDate(checkoutDate.getDate() + 2)

    //update check-out input
    $( "#check_out_date" ).val(checkoutDate)
});