我建立一個簡單的預訂系統,這需要:
1天的自舉的DatePicker的差異(失敗)
2.房間從組合框的數量(成功)
3.房價(200美元)
最後,所有3個值都相乘並顯示在輸入「grandtotal」中。
我已經嘗試了幾種方法,但由於我是JavaScript新手,我遇到了一些麻煩。你們能幫助我並引導我完成這個過程嗎?
一旦用戶選擇日期和房間數量,必須自動計算「grandtotal」。編寫天數計算的腳本也不正確。
我需要進一步的幫助,所以也許我可以聯繫你。再次感謝。引導日期選擇器的時間差,並預留計算
1.用戶選擇使用引導日期選擇之後,他/她選擇的房間數量的入住和退房日期。在用戶選擇時,輸入「grandtotal」必須自動更新。
<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>
That`s一切,我不知道如何當用戶點擊每個價值,以及如何做grandtotal計算分配的每個輸入(totaldays,totalrooms,grandtotal)。
現在發生了什麼?你得到什麼樣的價值? – RohitS
嗨@RohitS,如果我選擇從2016年1月10日和2016年2月10日的日期,它顯示32天 –
哎嗨,其因爲你的第二個參數是日期本身不是個月,所以應該是這樣的'10/01/2016'&& '10/02/2016' – RohitS