Question

所以，我正在开发一个基于Web的机场停车应用程序。我正在使用Twitter引导程序。要获取每个查询的日期和时间范围，我使用Date Range Picker for Bootstrap。我所做的是动态更改一个名为＆＃34; Total Price＆＃34;可根据日期范围选择器的输入（位于顶部）在预订页面中找到。充电率为每小时0.01。例如：如果我正在调查过程中，我选择在周六10（00:00）停车，并在周日11（00:00）取车，价格标签应显示为＆＃34; 24€＆＃34 ;.我附上计算价格的代码。

$(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

简介

在您的代码中几乎没有问题，我最终停止调试并专注于您的主要问题，即费用的计算。

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

注意，在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

1 个答案:

简介

解决方案

HTML

带有描述的JavaScript，位于HTML代码

输入和输出

截图