Calculating Time duration in minutes

Question

I am really digging it hard in calculating the time in minutes. I have two jquery time picker drop downs. One is denoted by Start time and the other is by End Time and I have generated a custom function which cal culates the time duration from start to end in minutes and show in third text box. Can somebody plesase guide where I am wrong in this function as my function is not working perfectly.

My dropdown has these values::

<ul class="ui-timepicker-list"><li>6:00am</li><li>6:15am</li><li>6:30am</li><li>6:45am</li><li>7:00am</li><li>7:15am</li><li>7:30am</li><li>7:45am</li><li class="">8:00am</li><li>8:15am</li><li>8:30am</li><li>8:45am</li><li>9:00am</li><li>9:15am</li><li>9:30am</li><li>9:45am</li><li class="ui-timepicker-selected">10:00am</li><li>10:15am</li><li>10:30am</li><li>10:45am</li><li>11:00am</li><li>11:15am</li><li>11:30am</li><li>11:45am</li><li>12:00pm</li><li>12:15pm</li><li>12:30pm</li><li>12:45pm</li><li>1:00pm</li><li>1:15pm</li><li>1:30pm</li><li>1:45pm</li><li>2:00pm</li><li>2:15pm</li><li>2:30pm</li><li>2:45pm</li><li>3:00pm</li><li>3:15pm</li><li>3:30pm</li><li>3:45pm</li><li>4:00pm</li><li>4:15pm</li><li>4:30pm</li><li>4:45pm</li><li>5:00pm</li><li>5:15pm</li><li>5:30pm</li><li>5:45pm</li><li>6:00pm</li><li>6:15pm</li><li>6:30pm</li><li>6:45pm</li><li>7:00pm</li><li>7:15pm</li><li>7:30pm</li><li>7:45pm</li><li>8:00pm</li><li>8:15pm</li><li>8:30pm</li><li>8:45pm</li><li>9:00pm</li><li>9:15pm</li><li>9:30pm</li><li>9:45pm</li><li>10:00pm</li><li>10:15pm</li><li>10:30pm</li><li>10:45pm</li><li>11:00pm</li></ul>

and I am passing the same to the function like if it is selected "7:15pm" from the first drop down and 7:15am from the second, the function CalcTime() will get "7:15pm", 7:15am" in the parameters that I am passing. the output should be on the basis of AM and Pm but my function simply subtract 7.25-7.25 and results in 0minutes where as correct output will be 720minutes. Calcfunctions coverts 7.15 to 7.25, 7:00 to 7, 7:30 to 7.5 and 7:45 to 7.75

The Plugin I am using is:: http://jonthornton.github.io/jquery-timepicker/

  <link href="~/Content/jquery.timepicker.css" rel="stylesheet" />
<script src="~/Content/jquery.timepicker.js"></script>

here is my function::: These are two controls::

     <div class="span2" style="width: 75px; float: left; margin-right: 5px;">
                            <div class="input-control text">
                                Start Time
                                 @Html.TextBoxFor(m => m.StartTime1)
                            </div>
                        </div>
                        <div class="span2" style="width: 75px; float: left; margin-right: 5px;">
                            <div class="input-control text">
                                End Time
                              @Html.TextBoxFor(m => m.EndTime1)
                            </div>
                        </div>

Here they becomes Time picker
     $('#EndTime1').timepicker({
            step: 15,
            minTime: '6:00am',
            maxTime: '11:00pm',
        });
        $('#StartTime1').timepicker({
            step: 15,
            minTime: '6:00am',
            maxTime: '11:00pm',
        });


below are the on change event of the time pickers
      $('#StartTime1').on('changeTime', function () {
        var Start_Time = $(this).val();
        var End_Time = $('#EndTime1').val();
        Total_Time_Taken = CalcTime(Start_Time, End_Time);
        $("#TotalTime1").val(Total_Time_Taken);
    });

    $('#EndTime1').on('changeTime', function () {
        var End_Time = $(this).val();
        var Start_Time = $('#StartTime1').val();
        Total_Time_Taken = CalcTime(Start_Time, End_Time);
        $("#TotalTime1").val(Total_Time_Taken);
    });


     function CalcTime(Start_Time, End_Time) {
    restHalf = 0;
    total = 0;
    restHalfForEnd = 0;
    alert(Start_Time);
    alert(End_Time);
    var arrStart_time = Start_Time.split(':');
    var arrEnd_time = End_Time.split(':');
    if (arrStart_time[1].contains('a')) {
        var RightPortion = arrStart_time[1].split('a');
        restHalf = RightPortion[0];
    }
    else {
        var RightPortion = arrStart_time[1].split('p');
        restHalf = RightPortion[0];
    }
    if (restHalf == "30") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.5);
    }
    else if (restHalf == "15") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.25);
    }
    else if (restHalf == "45") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.75);
    }
    start = arrStart_time[0];
    if (arrEnd_time[1].contains('a')) {
        var RightPortionForEnd = arrEnd_time[1].split('a');
        restHalfForEnd = RightPortionForEnd[0];
    }
    else {
        var RightPortionForEnd = arrEnd_time[1].split('p');
        restHalfForEnd = RightPortionForEnd[0];
    }
    if (restHalfForEnd == "30") {
        arrEnd_time[0] = parseFloat(arrEnd_time[0]) + parseFloat(0.5);
    }
    else if (restHalfForEnd == "15") {
        arrEnd_time[0] = parseFloat(arrEnd_time[0]) + parseFloat(0.25);
    }
    else if (restHalf == "45") {
        arrStart_time[0] = parseFloat(arrStart_time[0]) + parseFloat(0.75);
    }
    end = arrEnd_time[0];
    alert(start); alert(end);
    if (parseFloat(start) > parseFloat(end)) {
        // alert("start is greater");
        total = parseFloat(start) - parseFloat(end);
    }
    else {
        //alert("end is greater");
        total = parseFloat(end) - parseFloat(start);
    }
    var TimeinMinutes = Math.abs(total * 60);
    return TimeinMinutes + "" + "Mins";
}

Answer 1

If you are simply trying to convert hh:mma to minutes then subtract one time from another, something like the following may help:

// Format is hh:mma
function timeToMins(s) {
  var s = s.split(':');
  return (s[0]*60) + (/p/i.test(s[1]) && s[0] < 12? 720 : 0) + parseInt(s[1],10);
}


function calcTime(s, e) {
  return Math.abs(timeToMins(e) - timeToMins(s));
}

The above assumes both times are on the same day, so if the start is 10:00PM and end is 10:00AM you'll get the same answer as if the start was AM and the end PM. If you have values that span midnight or more than 24hrs, you should include a date and use Date objects so that daylight saving is also accounted for (the above doesn't, but that may not be important for the two days of the year where it might be an issue).