【问题标题】:Bootstrap Datepicker date difference and reservation calculationBootstrap Datepicker 日期差异和预留计算
【发布时间】:2016-10-11 18:12:49
【问题描述】:

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

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

1.用户使用Bootstrap Datepicker选择入住和退房日期,之后他/她选择房间数量。当用户选择时,输入的“总计”必须自动更新。

<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)以及如何进行总计。

【问题讨论】:

  • 现在发生了什么??你得到什么值??
  • 嗨@RohitS,如果我选择 2016 年 1 月 10 日和 2016 年 2 月 10 日的日期,它会显示 32 天
  • 嘿嗨,这是因为您的第二个参数是日期本身而不是月份,所以它应该类似于 '10/01/2016' && '10/02/2016'
  • 抱歉,在哪里?罗希特
  • 从 & 到文本字段的输入应该类似于 mm/dd/yyyy

标签: javascript jquery twitter-bootstrap datepicker


【解决方案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>

【讨论】:

    【解决方案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="-">

    【讨论】:

    • 你好 Louys,我非常感谢你所做的努力,它真的对我有用。非常感谢,这正是我需要的。但是只有一个问题,当我选择例如日期时,日期不能正常工作。 16 年 1 月 10 日到 16 年 2 月 10 日,它说 1,但是当我将“到”更改为之后的日期时,它保持不变。
    • 在上面的 sn-p 中没有这样做。将您的代码与calculateDuration() 周围条件if(diff ...) 中的sn-p 进行比较。
    • 谢谢@Louys,最后一个问题。在选择“从”和“到”时,可能会计算总计,并且默认情况下将总计房间分配为 1。因此,用户已经知道房间的价格,然后他/她可以选择房间的数量。
    • 当然,将&lt;input readonly id="totalrooms" placeholder="1"&gt; 更改为&lt;input readonly id="totalrooms" value="1"&gt;... 所以默认情况下该值将存在而不是占位符。如果你这样做了,你可以简单地删除&lt;option value="0" disabled selected&gt;How many rooms&lt;/option&gt;。 ;)
    • 不@Louys 我很紧张。我不知道如何解决这个问题。日期现在工作正常,您可以在 Stackoverflow 聊天中上线吗?
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2018-04-24
    • 1970-01-01
    相关资源
    最近更新 更多