2016-10-11 16 views
1
私が取る簡単な予約システム構築しています



1.ブートストラップ日付ピッカーのDaysの違いは、(失敗した)
2.コンボボックスから部屋の数は(成功しました) 3.部屋の価格($ 200)
最後に、3つの値がすべて乗算され、入力 "grandtotal"に表示されます。

私はいくつかの方法を試しましたが、私はjavascriptを初めて使うので、いくつかの問題があります。あなたはすべて私を助け、このプロセスを通して私を導くことができますか?
"grandtotal"は、ユーザーが日付と部屋の数を選択すると自動的に計算されなければなりません。日の計算のためのスクリプトコーディングも間違っています。
私はさらに助けが必要なので、私はあなたに連絡することができます。再度、感謝します。ブートストラップ日付ピッカーは、日付の差予約計算

1.ユーザーは、Bootstrap Datepickerを使用してチェックインとチェックアウトの日付を選択した後、部屋の数を選択します。ユーザが選択すると、入力「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、01/10/2016と02/10/2016の日付を選択した場合、それは32日表示されます –

+0

こんにちは、その2番目のパラメータは月ではないので、それは'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

こんにちはルイズ、それは本当に私のために働いた。ありがとう、それは私が必要なものです。しかし、問題は1つしかありません。日付はうまくいきません。 01/10/16から02/10/16までは1と言いますが、 "to"を日付に変更すると同じままです。 –

+0

これは上記のスニペットでは行いません。 'if(diff ...)'の条件の周りの 'calculateDuration()'のスニペットとあなたのコードを比較してください。 –

+0

ありがとう@Louys、最後の1つの質問。 「from」と「to」を選択すると、総計が計算され、デフォルトでは総室に1が割り当てられている可能性があります。したがって、ユーザは既に部屋の価格のアイデアを持っており、その後、部屋の数を選択することができる。 –

1

申し訳ねえ後期ANSのためではなく、ここでは、私はいくつかの変更をあなたのコードを試してみました(デフォルト値、いくつかの関数で初期化)し、それは私のためにうまく働いたものです。 .yesあなたが先に行くと、それをさらに向上させることができます.....それが役に立てば幸い: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>

関連する問題