Question

我正在建立一个简单的预订系统，其中包括：
1. Bootstrap Datepicker中天数的差异（失败）
2.组合框中的房间数（成功）
3.房价（200美元）
最后，所有3个值相乘并显示在输入＆＃34; grandtotal＆＃34;。

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

1.User使用Bootstrap Datepicker选择签入和签出日期，之后他/她选择房间数。当用户选择时，输入＆＃34; grandtotal＆＃34;必须自动更新。

<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

嘿抱歉晚了，但是这里是我尝试使用你的代码进行了一些改动（初始化默认值，很少的功能），它对我来说很好..你可以继续进一步改进它.... .hope有帮助：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>

Answer 2

这是一个有效的解决方案。

您的负天数是固定的如果日期不可能，则错误显示为红色总价计算。

如果您有什么不明白的话，请随意询问此代码中的任何内容 ;）

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="-">

Bootstrap Datepicker日期差异和预订计算

2 个答案: