Question

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

我希望有＃34;退房日期＆＃34;自动成为2天后＆＃39;除非用户另行选择，否则比签入日期更长。

例如：入住日期（由用户在日历上输入）2016年9月1日退房日期 - 自动生成2016年9月3日的文本

这是我的iFrame Widget的代码：

<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">

但只是添加了文字＆＃34; check_In_date＆＃34;而不是＆＃34; check_in_date＆＃34;来自上述领域的价值

Answer 1

用户选择日期后，您必须在签入日期框中设置和事件监听器。你更新了签出框，像这样

$( "#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)
});

添加2天到＆＃34;签入日期＆＃34;预订小工具

1 个答案: