价格计算-Javascript

Question

So, I am developing a web based application for an airport parking. I am using Twitter bootstrap for the form. To get the date and time range of every enquiry I am using Date Range Picker for Bootstrap. What I did was to dynamically change a label's value called "Total Price" which is found in the booking page based on the Date Range Picker's inputs (located on the top). The charging rates are 0.01 per hour. For example: In case I am in the process of my enquiry and I choose to drop my car off at Saturday 10 (00:00) and pick it up at Sunday 11 (00:00) the price label should display "24€". I attach the code that calculates the price.

$(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});
});

So far I achieved to calculate the price based on the date range and I am looking for a way to implement some price manipulation based on the drop-off and pick-up time. I want my code to charge the drop-off day as an 24h full day only if the drop-off time exceeds 6 hours. Same with the pick-up day. For example, if I drop my car or motorcycle off at Tuesday November 10 at 18:00 the system should charge 6 hours (0.01 per hour). If however the drop-off time is at 17:00 it should charge a whole day.

Link to the working page .

It is my understanding that this might me too much to ask but I tried as far as I could with no result. Thank you in advance.

Answer 1

Intro

In your code there was few issues, I ended up stop debugging and focused on your main question, which is calculation of fee.

I have re-done the part was required to answering your question and you need to spend a little bit time fixing/debugging your code and implement my solution in it.

Note , in JavaScript it is important to keep the correct order of the code, one of the issues was jQuery conflicting. Any way try to copy my code and it works.

You might import the libraries if you intend to work offline.

Solution

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 with description to be placed after the HTML code

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

Input and output

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

Screenshot