车辆租金计算

Vehicle Rental Rate Calculation

正在尝试进行预订和车辆租赁计算。

问题

我正在做 javascript 计算并卡在上面的最后一点。

计算器

发现很少,但不是上面的场景,有的只是简单的直接计算开始日期到结束日期。

HTML-Javascript and My Tries

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vehicle Rental Booking Calculation</title>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<link rel="stylesheet" href="https://jqueryui.com/resources/demos/style.css">

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>

<style type="text/css">

td.red span.ui-state-default {
    color: #f00;
    font-weight:normal;
}
td.green span.ui-state-default {
    color: #0f0;
}
</style>

<script type="text/javascript">

function monthDiff(d1, d2) {
    var months;
    months = (d2.getFullYear() - d1.getFullYear()) * 12;
    months -= d1.getMonth() + 1;
    months += d2.getMonth();
    return months <= 0 ? 0 : months;
}

$(function() {

    var array = ["2016-07-26","2016-08-17","2016-08-18","2016-08-19","2016-08-20","2016-08-30","2016-08-31","2016-09-01","2016-09-02","2016-09-15","2016-09-16","2016-09-17","2016-09-20","2016-09-21","2016-09-22","2016-10-05","2016-10-06","2016-10-07","2016-10-12","2016-10-13","2016-10-14","2016-11-17","2016-11-18","2016-11-19","2016-11-20","2016-11-21","2016-11-22"];       

    $(".datepicker").datepicker({
        showOtherMonths: false,
        selectOtherMonths: true,
        dateFormat : "dd-mm-yy",

        minDate: 0,
        maxDate: "+12M +10D",
        beforeShowDay: function(date){
            var string = jQuery.datepicker.formatDate('yy-mm-dd', date);

            //alert(date+"  "+array.indexOf(string));
            var day = date.getDay();

            if (array.indexOf(string) != -1)
            {
            return [ array.indexOf(string) == -1, 'holiday red', jQuery.datepicker.formatDate('dd-mm-yy', date) + ' is booked' ];
            }
            else
            {
            if (day == 0 || day == 6)
            return [array.indexOf(string) == -1, '', 'For the Saturday or Sunday selection, the start date (Collection) should be before Saturday and end date (Return) should be after Sunday.\n\nFor weekend package: \nWeekend is from Fri to Mon [Total 2 days], Collection is on Friday and Return is on Monday.'];
            else
            return [ array.indexOf(string) == -1 ];
            }

        },
        onSelect: function(dateText, inst) {

            $(this).data('datepicker').inline = false;

            var obj_id = $(this).attr("id");

            if (obj_id == "start_date" || obj_id == "end_date")
            {
                // Weekend select STARTS
                var pattern = /(\d{2})\-(\d{2})\-(\d{4})/;
                var dt = new Date(dateText.replace(pattern,"--"));
                var day = dt.getDay();

                if (day == 0 || day == 6)
                {
                    alert("For the Saturday or Sunday selection, the start date (Collection) should be before Saturday and end date (Return) should be after Sunday.\n\nFor weekend package: \nWeekend is from Fri to Mon [Total 2 days], Collection is on Friday and Return is on Monday.");
                    $(this).val("");
                    $(this).data('datepicker').inline = true;
                }
                // Weekend select ENDS


                // Calculation  STARTS
                var calc_flag = 1;
                var start_date = $("#start_date").val();
                var end_date   = $("#end_date").val();

                if (start_date == "" || end_date == "")
                calc_flag = 0;

                // Get the vehicle rates
                var hid_daily_rate   = $("#hid_daily_rate").val();
                var hid_weekend_rate = $("#hid_weekend_rate").val();
                var hid_weekly_rate  = $("#hid_weekly_rate").val();
                var hid_monthly_rate = $("#hid_monthly_rate").val();

                var rental_fee       = 0;


                // Testing  STARTS
                if (calc_flag)
                {
                // get the start and end date       
                var dateStart = $("#start_date").datepicker("getDate");
                var dateEnd = $("#end_date").datepicker("getDate");
                var totalmonths = monthDiff(dateStart, dateEnd);


                var totalmonths1 = dateEnd.getMonth() - dateStart.getMonth() + (12 * (dateEnd.getFullYear() - dateStart.getFullYear()));

                var totalDays = (dateEnd - dateStart) / 24 / 60 / 60 / 1000; //get total days

                console.log(dateStart+"\n"+dateEnd+"\ntotalmonths="+totalmonths+","+totalmonths1+" totalDays="+totalDays);
                }
                // Testing  ENDS


                if (calc_flag)
                {
                    var a = $("#start_date").datepicker("getDate").getTime(),
                        b = $("#end_date").datepicker("getDate").getTime(),
                        c = 24*60*60*1000,
                        diffDays = Math.round(Math.abs((a - b)/(c)));
                        //console.log(diffDays); //show difference

                    //alert(diffDays);


                    rental_fee = hid_daily_rate*diffDays;

                    $("#rental_fee").html('$'+rental_fee);


                }
                // Calculation  ENDS

            }

        } 

    });


});
</script>

</head>


<div class="container">
<div class="col-lg-12 col-xs-offset-1"><h2 style="text-decoration:underline;">Booking Form</h2></div>

<div class="col-lg-12 col-xs-offset-1">
<div class="alert-info" style="width:600px;">
<ul>
    <li>Daily Rate (Mon to Fri)  <span>: <strong></strong></span> <br/>- Weekday (Mon - Fri), Min 2days is required</li>
    <li>Weekend Rate <span>: <strong>0</strong></span> <br/> - Weekend Package (Fri - Mon)</li>
    <li>Weekly Rate <span>: <strong>0</strong></span> <br/> - Weekly Package</li>
    <li>Monthly Rate <span>: <strong>60</strong></span> <br/> - Monthly Package</li>
</ul>
</div>
</div>

<form role="form" class="form-horizontal" method="POST" action="booking_action.php" id="frmBookingFormAction" name="frmBookingFormAction">
<input type="hidden" value="17" name="vehicle_id" id="vehicle_id">

<input type="hidden" id="hid_daily_rate" name="hid_daily_rate" value="75" />
<input type="hidden" id="hid_weekend_rate" name="hid_weekend_rate" value="290" />
<input type="hidden" id="hid_weekly_rate" name="hid_weekly_rate" value="490" />
<input type="hidden" id="hid_monthly_rate" name="hid_monthly_rate" value="1860" />

<div class="form-group">
  <label for="start_date" class="control-label col-sm-3">Start Date <label class="clr_error">*</label></label>
  <div class="col-sm-5">
    <input type="text" autocomplete="off" placeholder="dd-mm-yy" value="" name="start_date" id="start_date" class="form-control datepicker">
  </div>
</div>

<div class="form-group">
  <label for="end_date" class="control-label col-sm-3">End Date <label class="clr_error">*</label></label>
  <div class="col-sm-5">
    <input type="text" autocomplete="off" placeholder="dd-mm-yy" value="" name="end_date" id="end_date" class="form-control datepicker">
  </div>
</div>

<div class="form-group">
  <label class="control-label col-sm-3" for="collection_time">Collection and Return Time </label>
  <div class="col-sm-5">
    <select id="collection_time" name="collection_time" class="form-control">
    <option value="0">[Select]</option>
    <option value="10:00">10:00 am</option>
    <option value="11:00">11:00 am</option>
    <option value="12:00">12:00 pm</option>
    <option value="13:00">1:00 pm</option>
    <option value="14:00">2:00 pm</option>
    <option value="15:00">3:00 pm</option>
    <option value="16:00">4:00 pm</option>
    <option value="17:00">5:00 pm</option>
    <option value="18:00">6:00 pm</option>
    </select>
  </div>
</div>

<div class="form-group">
  <label class="control-label col-sm-3">Rental Fee</label>
  <div class="col-sm-5">
    <p class="form-control-static"><strong>: <span id="rental_fee">[=10=].00</span></strong></p>
  </div>
</div>

<div class="form-group">
  <div class="col-sm-offset-3 col-sm-8">
    <input type="button" class="btn btn-primary" value="Continue" name="btnSubmit" id="btnSubmit">
  </div>
</div>

</form>

</div>

S C R E E N S H O T S


8 月至 9 月的测试日历和租金

图1


预订表格和计算

图2


计算公式示例

图3


Working Fiddle


提前致谢

JSFiddle

相关代码

if (calc_flag) {
    // get the start and end date
    var dateStart = $("#start_date").datepicker("getDate");
    var dateEnd = $("#end_date").datepicker("getDate");

    // Add months to the rental fee, and move the date forward
    var months = monthDiff(dateStart, dateEnd);
    var currDate = addMonths(dateStart, months);
    rates.monthly = months;

    // Add weeks to the rental fee, and move the date forward
    var days = (dateEnd - dateStart) / 24 / 60 / 60 / 1000;
    var weeks = Math.floor(days / 7);
    currDate.setTime(currDate.getTime() + weeks * 7 * 24 * 60 * 60 * 1000);
    rates.weekly = weeks;

    // Calculate the daily rate, noting conflict with
    // weekend rate
    var dDays = dateEnd.getDay() - currDate.getDay();
    if (dDays < 0) dDays += 7;
    rates.daily += dDays;

    // If it loops around, readjust for weekend rate
    if (currDate.getDay() > dateEnd.getDay()) {
        rates.daily   -= 3;
        rates.weekend += 1;
    }

    console.log(rates);
    rental_fee = rates.monthly * hid_monthly_rate +
                 rates.weekly  * hid_weekly_rate  +
                 rates.weekend * hid_weekend_rate +
                 rates.daily   * hid_daily_rate;

    // Update the interface
    $("#rental_fee").html('$'+rental_fee);              
}

说明

本题有两种比率:

  1. 持续时间费率(每月、每周和每天)
  2. 特定费率(周末)

要计算持续时间率,您可以从最大间隔到最小间隔计算,计算出每个间隔在该时间段内有多少 'fit'。比如9天,可以放0整月,1整周,2整天。

当您考虑周末汇率时,问题就变得复杂了。 您必须了解相关天数,才能确定分配周末费率或每日费率是否合适。

要解决这个问题,您可以计算月费率和周费率后的剩余天数,并且由于 少于周 ,并且 javascripts Date.getDay() 函数的工作原理星期一,你可以检查跟踪日期的“天”是否大于结束日期的“天”(意味着它必须循环,表示周末)