2016-10-11 66 views
1

我建立一個簡單的預訂系統,這需要:
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)。

+0

現在發生了什麼?你得到什麼樣的價值? – RohitS

+0

嗨@RohitS,如果我選擇從2016年1月10日和2016年2月10日的日期,它顯示32天 –

+0

哎嗨,其因爲你的第二個參數是日期本身不是個月,所以應該是這樣的'10/01/2016'&& '10/02/2016' – RohitS

回答

0

這是一個工作解決方案。

你的消極天數是固定的。
如果有不可能的日期範圍,則會以紅色顯示錯誤。
總價格計算。

隨意問任何事情在這段代碼中如果有什麼你不明白。
;)

var roomPrice = 200; 
 

 
// bootstrap datepicker configuration 
 
$(document).ready(function(){ 
 
    $("#from, #to").datepicker({ 
 
     defaultDate: "+0w", 
 
     changeMonth: false, 
 
     numberOfMonths: 1, 
 
     dateFormat: 'dd-mm-yy', 
 
     minDate: '01-10-2016', 
 
     maxDate: '31-10-2016' 
 
    }); 
 
}); 
 

 
function ChooseContact(data) { 
 
    var totalrooms = data.value; 
 
    document.getElementById ("totalrooms").value = (Number(totalrooms)); 
 
} 
 

 

 
function calculateDuration() { 
 
    var diff = 0; 
 
    if(startDate !="" && endDate !=""){ 
 
     var startDate = new Date($('#from').val()); 
 
     var endDate = new Date($('#to').val()); 
 
     diff = endDate - startDate; 
 
    } 
 

 
    if(diff==0){ 
 
     $("#totaldays").val("1"); 
 
     $("#grandtotal").val("").css("color","black"); 
 
    } 
 
    if(diff>1){ 
 
     $("#totaldays").val((diff/86400000) +1) 
 
     $("#grandtotal").val("").css("color","black"); 
 
    } 
 
    if(diff<0){ 
 
     $("#totaldays").val((diff/86400000) -1); 
 
     $("#grandtotal").val("Error in dates...").css("color","red"); 
 
    } 
 
    return; 
 
} 
 

 
function grandTotal(){ 
 
    calculateDuration(); 
 
    var days = $("#totaldays").val(); 
 
    var rooms = $("#totalrooms").val(); 
 

 
    if(days != "" && parseInt(days) >0){ 
 
     if(rooms != ""){ 
 
      var total = parseInt(days) * parseInt(rooms) * roomPrice; 
 
      $("#grandtotal").val(total.toFixed(2)).css("color","black"); 
 
     }else{ 
 
      $("#grandtotal").val("").css("color","black"); 
 
     } 
 
    } 
 
} 
 

 
$("#rooms, #from, #to").on("change",function(){ 
 
    grandTotal(); 
 
    $(".datepicker").hide(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/css/bootstrap-datepicker.css" rel="stylesheet"/> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.6.4/js/bootstrap-datepicker.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<form method="post" action="reservation.php"> 
 
    <input name="checkin" type="text" id="from" placeholder="Select a date"> 
 
    <input name="checkout" type="text" id="to" placeholder="Select a date"> 
 
    <select onchange="ChooseContact(this)" name="numrooms" id="rooms"> 
 
     <option value="0" disabled selected>How many rooms</option> 
 
     <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="-">

+0

你好Louys使用他們,我真的很感激您所做的努力它真的爲我工作。非常感謝,那就是我所需要的。但只有一個問題,日期不能正常工作,當我選擇例如2016年10月16日至2016年2月2日,它說1,但是當我將「到」更改爲日期後,它仍然是一樣的。 –

+0

在上面的代碼片段中沒有這樣做。比較你的代碼和''calculateDuration()'圍繞條件'if(diff ...)''中的代碼片段。 –

+0

謝謝@Louys,最後一個問題。在選擇「從」和「到」時,可能會計算出總計,並且默認情況下總共分配1個房間。因此,用戶已經知道房間的價格,然後他/她可以選擇之後的房間數量。 –

1

嘿對不起,晚ANS但這裏的東西我試圖用一些改變你的代碼(初始化使用默認值,一些功能),它爲我工作得很好。 。是的,你可以繼續前進,進一步提高它.....希望它有助於:d

$().ready(function() { 
 
var dates = $("#from, #to").datepicker({ 
 
showOtherMonths: false, 
 
selectOtherMonths: false, 
 
}); 
 
    
 
    var dt=new Date(); 
 
    var today= ""; 
 
    today=dt.getDate()+"/"; 
 
    today+=dt.getMonth()+1+"/"; 
 
    today+=dt.getFullYear()+""; 
 

 
    var tom=""; 
 
    tom=dt.getDate()+"/"; 
 
    tom+=(dt.getMonth()+2)+"/"; 
 
    tom+=dt.getFullYear()+""; 
 
    $("#from").val(today); 
 
$("#to").val(tom); 
 
    getDatediff(); 
 
    Bill(); 
 
}); 
 
$('#from,#to').change(function(){ 
 
    getDatediff(); 
 
}); 
 

 

 
function getDatediff() 
 
{ 
 
    var startDate = new Date($('#from').val()); 
 
    var endDate = new Date($('#to').val()); 
 
    var diff = endDate - startDate; 
 
    var res=(Number(diff)/86400000); 
 
     if(res>0) 
 
     { 
 
    $('#totaldays').val(res); 
 
     } 
 
     else 
 
    { 
 
     $('#totaldays').val(0); 
 
    } 
 
    Bill(); 
 
} 
 
$("#from ,#to").change(function(){ 
 
    getDatediff(); 
 
}); 
 

 
function Bill() 
 
{ 
 
var rooms= $("#totalrooms").val(); 
 
var days=$('#totaldays').val(); 
 
var amt=$('#price option:selected').text(); 
 
var sum=rooms*days*amt; 
 
    $("#grandtotal").val(sum); 
 
} 
 

 
$('#rooms').change(function(){ 
 
    $('#totalrooms').val($(this).find('option:selected').val()) 
 
    getDatediff(); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" crossorigin="anonymous"></script> 
 
<form method="post" action="reservation.php"> 
 
From:<input id="from" name="checkin" type="text" id="from" value=""/><br/> 
 
To:<input id="to" name="checkout" type="text" id="to"/><br/> 
 
Select Rooms:<select name="numrooms" id="rooms"> 
 
    <option value="1" selected>1 room</option> 
 
    <option value="2">2 rooms</option> 
 
    </select><br/> 
 
Select Price:<select class="hidden" name="price" id="price"> 
 
      <option selected="selected">200</option> 
 
    </select><br/><br/><br/> 
 
Your Details <br/><br/> 
 
Days:<input readonly id="totaldays" placeholder="1" value="1"><br/> 
 
Rooms:<input readonly id="totalrooms" placeholder="1" value="1"><br/> 
 
GrandTotal:<input readonly id="grandtotal" placeholder="0.0"> 
 
    </form>