价格计算 - Javascript

Question

因此，我正在为机场停车场开发一个基于 Web 的应用程序。我正在使用 Twitter bootstrap 作为表单。为了获取每个查询的日期和时间范围，我使用 Bootstrap 的日期范围选择器。我所做的是根据日期范围选择器的输入（位于顶部）动态更改在预订页面中找到的名为 "Total Price" 的标签值。收费标准为每小时0.01。例如：如果我在查询过程中选择在周六 10 点 (00:00) 还车并在周日 11 点 (00:00) 取车，价格标签应显示“24€” .我附上计算价格的代码。

$(document).ready(function () {   
var select=function(dateStr) {
    var d1 = $('#date1').datepicker('getDate');
    var d2 = $('#date2').datepicker('getDate');
    var diff = 0;
    var currentTime    = moment(d1);
    var endTimeJS      = moment(d2);
    var timeRemainJSQ  = endTimeJS.diff(currentTime,'hours')//To get the difference in hours
    //alert(timeRemainJSQ)
    diff    =  timeRemainJSQ/3.42857142857143; //multiply with 0.01 per hour
    $('#calculated').val(diff);
    $('#testid').html(diff);

}

$("#date1").datepicker({ 
    onSelect: select
});
$('#date2').datepicker({onSelect: select});
});

到目前为止，我已经实现了根据日期范围计算价格，我正在寻找一种方法来根据送货和取货时间实施一些价格操纵。我希望我的代码仅在下车时间超过 6 小时时才将下车日计为 24 小时全天。与接机日相同。例如，如果我在 11 月 10 日星期二 18:00 放下我的汽车或摩托车，系统应该收费 6 小时（每小时 0.01）。但是，如果还车时间是 17:00，则应收取一整天的费用。

Link to the working page.

据我了解，这可能是我的要求太高了，但我已尽我所能尝试但没有结果。提前谢谢你。

Answer 1

简介

你的代码没有什么问题，我最终停止调试并专注于你的主要问题，即费用的计算。

我已经重新完成了回答您问题所需的部分，您需要花一点时间fixing/debugging您的代码并在其中实施我的解决方案。

注意，在JavaScript中保持代码的正确顺序很重要，其中一个问题是jQuery冲突。任何方式尝试复制我的代码并且它有效。

如果您打算离线工作，您可以导入这些库。

解决方案

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="//jonthornton.github.io/jquery-timepicker/jquery.timepicker.js"></script>

<form method="post" action="makecleaningappt">
    From<br/>
    <input type="text" id="datepicker" name="date"><input type="text" id="timepicker1" name="time"><br/>
    To<br/>
    <input type="text" id="datepickerEnd" name="date"><input type="text" id="timepickerEnd1" name="time"><br/>
</form>

JavaScript 描述放在 HTML 代码之后

<script type="application/javascript">
    $(document).ready(function () {

        var select = function () {
            priceCal();
        };

        $("#datepickerStart").datepicker({
            onSelect: select,
            onUpdate: select
        });
        $("#timepickerStart").timepicker({
            onSelect: select,
            onUpdate: select
        });
        $("#datepickerEnd").datepicker({
            onSelect: select,
            onUpdate: select
        });
        $("#timepickerEnd").timepicker({
            onSelect: select,
            onUpdate: select
        });
    });

    $(function () {
        $('#datepickerStart').datepicker({
            'format': 'm/d/yyyy',
            'autoclose': true
        });
    });

    $(function () {
        $('#timepickerStart').timepicker({
            'showDuration': true,
            'timeFormat': 'g:ia'
        });
    });

    $(function () {
        $('#datepickerEnd').datepicker({
            'format': 'm/d/yyyy',
            'autoclose': true
        });
    });

    $(function () {
        $('#timepickerEnd').timepicker({
            'showDuration': true,
            'timeFormat': 'g:ia'
        });
    });

    function priceCal() {
        //declares
        var hourRate = 0.01;
        var dayRate = 6;
        var fullDayHours = 6 * 60;

        var dateStart = $('#datepickerStart').datepicker('getDate');
        var hourStart = $('#timepickerStart').timepicker('getTime');
        var dateEnd = $('#datepickerEnd').datepicker('getDate');
        var hourEnd = $('#timepickerEnd').timepicker('getTime');

        var totalDays = (dateEnd - dateStart) / 24 / 60 / 60 / 1000; //we get total days
        var totalHours = (hourEnd - hourStart) / 60 / 1000;          //we get total minutes

        if (totalDays > 0) {
            //more than one day
            console.log("Parked for " + totalDays + " day/s it cost " + (totalDays * dayRate));
        } else {
            if (totalHours > 0) {
                //less then 1 day
                if (totalHours >= fullDayHours) {
                    // more than 6 hours
                    console.log("Parked for " + totalHours + " minutes it cost " + dayRate);
                } else {
                    // less than 6 hours
                    console.log("Parked for " + totalHours + " minutes it cost " + (totalHours * hourRate));
                }
            }
        }

    }
</script>

输入输出

From 11/09/2015 to 11/08/2015 time 12:00am to 11:00am       no results
From 11/09/2015 to 11/09/2015 time 12:00am to 12:00am       no results
From 11/09/2015 to 11/09/2015 time 12:00am to 12:30am       30 minutes cost 0,3
From 11/09/2015 to 11/09/2015 time 12:00am to 06:00am       360 minutes cost full day 6
From 11/09/2015 to 11/10/2015 time any time                 1 day cost full day 6

价格计算 - Javascript

Price Calculation - Javascript

javascript

jquery

twitter-bootstrap

momentjs

简介

解决方案

HTML

JavaScript 描述放在 HTML 代码之后

输入输出

截图