我有一张酒店预订表,根据成人、老年人和学生的数量计算每人的价格。我想包括一个日期范围选择器,它将计算总成本取决于所选的天数,但当我包括第二个日历时,它不显示(没有下拉)。如何包含允许选择结束日期并计算总成本的第二个日历?
update_amounts();
$('select').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('$' + amount);
});
$('#total').val('$' + sum);
$('#total').val('$')
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td><strong>Adult</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="16 - 65 years old"><sup class="icon-info-4"></sup></a>
<span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="adults" id="adults">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">ksh 0</span>
</td>
</tr>
<tr>
<td><strong>Senior</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="Over 65 years old"><sup class="icon-info-4">
</sup></a><span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="senior" id="senior">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
<tr>
<td><strong>Student >15 yrs</strong> <span class="price">2,000</span> </td>
<td>
<div class="styled-select">
<select class="form-control" name="student" id="student">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
</tbody>
</table>
<div class="form-group">
<label>From?</label>
<input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
<div class="form-group">
<label>To?</label>
<input type="text" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
</div>
<div class="form-group">
<label>Name and Lastname</label>
<input type="text" class="form-control" id="name_lastname_booking" name="name_lastname_booking" placeholder="Name and Lastname">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email_booking" name="email_booking" placeholder="Email">
</div>
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" id="telephone_booking" name="telephone_booking" placeholder="Telephone">
</div>
<div class="form-group add_bottom_30">
</div>
<div class="form-group">
<input type="submit" value="Book now" class="btn_full" id="submit-booking">
</div>
</form>
</body>
发布于 2018-12-13 09:17:02
首先,我在表的末尾插入了一个开始标记,并在表单组的末尾插入了缺少的结束<div>
标记。您已经注意到的接受日期的输入被设置为"text“类型。我将这两个更改为input type="date"
,现在日历下拉列表显示在两个输入上。您可以使用js进行calculate the difference between the two selected dates,并根据相应的价格进行计算。或者,如果您希望在一次选择中同时选择两个日期,则可以使用Dan Grossman的开源daterangepicker工具。
希望这能有所帮助。
update_amounts();
$('select').change(update_amounts);
function update_amounts() {
var sum = 0.0;
$('#tickets > tbody > tr').each(function() {
var qty = $(this).find('option:selected').val();
var price = $(this).find('.price').text().replace(/[^\d.]/, '');
var amount = (qty * price);
sum += amount;
$(this).find('.subtotal').text('$' + amount);
});
$('#total').val('$' + sum);
$('#total').val('$')
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<table>
<tbody>
<tr>
<td><strong>Adult</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="16 - 65 years old"><sup class="icon-info-4"></sup></a>
<span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="adults" id="adults">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">ksh 0</span>
</td>
</tr>
<tr>
<td><strong>Senior</strong><a href="#" class="tooltip-1" data-placement="top" title="" data-original-title="Over 65 years old"><sup class="icon-info-4">
</sup></a><span class="price">3,400</span>
</td>
<td>
<div class="styled-select">
<select class="form-control" name="senior" id="senior">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
<tr>
<td><strong>Student >15 yrs</strong> <span class="price">2,000</span> </td>
<td>
<div class="styled-select">
<select class="form-control" name="student" id="student">
<option value="">Select</option>
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</div>
</td>
<td class="text-center"><span class="subtotal">$0</span>
</td>
</tr>
</tbody>
</table>
<form>
<div class="form-group">
<label>From?</label>
<input type="date" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
<div class="form-group">
<label>To?</label>
<input type="date" class="form-control" id="date_pick" name="date_pick" data-date-format="M d, D" placeholder="Select a date">
</div>
<div class="form-group">
<label>Name and Lastname</label>
<input type="text" class="form-control" id="name_lastname_booking" name="name_lastname_booking" placeholder="Name and Lastname">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" id="email_booking" name="email_booking" placeholder="Email">
</div>
<div class="form-group">
<label>Telephone</label>
<input type="text" class="form-control" id="telephone_booking" name="telephone_booking" placeholder="Telephone">
</div>
<div class="form-group add_bottom_30">
</div>
<div class="form-group">
<input type="submit" value="Book now" class="btn_full" id="submit-booking">
</div>
</div>
</form>
</body>
https://stackoverflow.com/questions/53752437
复制相似问题