【发布时间】:2016-10-11 18:12:49
【问题描述】:
我正在构建一个简单的预订系统,它需要:
1. Bootstrap Datepicker 中的天数差异(失败)
2. 组合框的房间数(成功)
3. 房价($200)
最后,将所有 3 个值相乘并显示在输入“总计”中。
我尝试了几种方法,但由于我是 javascript 新手,所以遇到了一些麻烦。你们都可以帮助我并指导我完成这个过程吗?
用户选择日期和房间数量后,必须自动计算“总计”。用于计算天数的脚本编码也无法正常工作。
我需要进一步的帮助,所以也许,我可以联系你。再次感谢。
1.用户使用Bootstrap Datepicker选择入住和退房日期,之后他/她选择房间数量。当用户选择时,输入的“总计”必须自动更新。
<form method="post" action="reservation.php">
<input id="from" name="checkin" type="text" id="from"/>
<input id="to" name="checkout" type="text" id="to"/>
<select onchange="ChooseContact(this)" name="numrooms" id="rooms">
<option value="1">1 room</option>
<option value="2">2 rooms</option>
</select>
<select class="hidden" name="price">
<option selected="selected">200</option>
</select>
</form>
// this displays the respective values for selecting the dates, the number of rooms and finally, the "grandtotal" is shown automatically.
<input readonly id="totaldays" placeholder="1">
<input readonly id="totalrooms" placeholder="1">
<input readonly id="grandtotal" placeholder="-">
// bootstrap datepicker configuration
<script>
$(function() {
var dates = $( "#from, #to" ).datepicker({
defaultDate: "+0w",
changeMonth: false,
numberOfMonths: 1,
dateFormat: 'dd-mm-yy',
minDate: '01-10-2016',
maxDate: '31-10-2016',
});
});
</script>
// bootstrap datepicker days calculation and total rooms assigned to input
<script>
$(function() {
$('.datepicker').datepicker({format: "dd-mm-yyyy"});
var calculateDuration = function() {
var startDate = new Date($('#from').val());
var endDate = new Date($('#to').val());
var diff = endDate - startDate;
document.getElementById('totaldays').value = (Number(diff) / 86400000) +1;
}
$('#from').change(calculateDuration);
$('#to').change(calculateDuration);
});
function ChooseContact(data) {
var totalrooms = data.value;
document.getElementById ("totalrooms").value = (Number(totalrooms));
}
</script>
就是这样,我不知道当用户点击每个值时如何分配每个输入(totaldays、totalrooms、grandtotal)以及如何进行总计。
【问题讨论】:
-
现在发生了什么??你得到什么值??
-
嗨@RohitS,如果我选择 2016 年 1 月 10 日和 2016 年 2 月 10 日的日期,它会显示 32 天
-
嘿嗨,这是因为您的第二个参数是日期本身而不是月份,所以它应该类似于 '10/01/2016' && '10/02/2016'
-
抱歉,在哪里?罗希特
-
从 & 到文本字段的输入应该类似于 mm/dd/yyyy
标签: javascript jquery twitter-bootstrap datepicker