javascript - Bootstrap Datepicker 日期差异和预订计算

Question

我正在构建一个简单的预订系统，它需要:
1.Bootstrap Datepicker中Days的差异(失败)
2.组合框中的房间数(成功)
3. 房价($200)
最后，所有 3 个值相乘并显示在输入“grandtotal”中。

我尝试了几种方法，但由于我是 javascript 新手，所以遇到了一些麻烦。你们都可以帮助我并指导我完成这个过程吗？
用户选择日期和房间数量后，必须自动计算“总计”。用于计算天数的脚本编码也无法正常工作。
我需要进一步的帮助，也许我可以联系您。再次感谢。

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>

仅此而已，我不知道当用户单击每个值时如何分配每个输入(totaldays、totalrooms、grandtotal)以及如何进行总计计算。

Answer 1

嘿，抱歉迟到了，但这是我对您的代码进行了一些更改(使用默认值初始化，很少有函数)的尝试，它对我来说工作得很好..是的，您可以继续并进一步改进它.... .希望有帮助: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>