How to calculate the hours between two times with jquery?

Question

I am trying to calculate the hours between two times.

Below is where I am currently but this code fails in two ways.

1). I need .Hours to output time in decimal.

(e.g one and half hours should output 1.5 and 15mins should be 0.25).

2). Calculation currently does not treat values for time as time.

(e.g 23:00 to 2:00 should equal 3 and NOT -21 as currently).

---

HTML

<input class="Time1" value="10:00" />
<input class="Time2" value="12:00" />
<input class="Hours" value="0" />

JQUERY

 $(function () {
     function calculate() {
         var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);
         $(".Hours").val(hours);
     }
     $(".Time1,.Time2").change(calculate);
     calculate();
 });

http://jsfiddle.net/44NCk/

Solution 1

Easy way is if you get a negative value, add 24 hours to it and you should have your result.

var hours = parseInt($(".Time2").val().split(':')[0], 10) - parseInt($(".Time1").val().split(':')[0], 10);

// if negative result, add 24 hours
if(hours < 0) hours = 24 + hours;

Demo: http://jsfiddle.net/44NCk/1/

Getting the minutes as a decimal involves a bit more as you can see in thsi fiddle: http://jsfiddle.net/44NCk/2/

function calculate() {
     var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
     var hours1 = parseInt(time1[0], 10), 
         hours2 = parseInt(time2[0], 10),
         mins1 = parseInt(time1[1], 10),
         mins2 = parseInt(time2[1], 10);
     var hours = hours2 - hours1, mins = 0;

     // get hours
     if(hours < 0) hours = 24 + hours;

     // get minutes
     if(mins2 >= mins1) {
         mins = mins2 - mins1;
     }
     else {
         mins = (mins2 + 60) - mins1;
         hours--;
     }

     // convert to fraction of 60
     mins = mins / 60; 

     hours += mins;
     hours = hours.toFixed(2);
     $(".Hours").val(hours);
 }

Solution 2

function timeobject(t){
  a = t.replace('AM','').replace('PM','').split(':');
  h = parseInt(a[0]);
  m = parseInt(a[1]);
  ampm = (t.indexOf('AM') !== -1 ) ? 'AM' : 'PM';
  return {hour:h,minute:m,ampm:ampm};
}

function timediff(s,e){
  s = timeobject(s);
  e = timeobject(e);
  e.hour = (e.ampm === 'PM' &&  s.ampm !== 'PM' && e.hour < 12) ? e.hour + 12 : e.hour;
  hourDiff = Math.abs(e.hour-s.hour);
  minuteDiff = e.minute - s.minute;

  if(minuteDiff < 0){
    minuteDiff = Math.abs(60 + minuteDiff);
    hourDiff = hourDiff - 1;
  }

  return hourDiff+':'+ Math.abs(minuteDiff);
}

difference = timediff('09:10 AM','12:25 PM');  // output 3:15
difference = timediff('09:05AM','10:20PM');  // output 13:15

Solution 3

 $(function () {
     function calculate() {
         var time1 = $(".Time1").val().split(':'), time2 = $(".Time2").val().split(':');
         var hours1 = parseInt(time1[0], 10), 
             hours2 = parseInt(time2[0], 10),
             mins1 = parseInt(time1[1], 10),
             mins2 = parseInt(time2[1], 10),
             seconds1 = parseInt(time1[2], 10),
             seconds2 = parseInt(time2[2], 10);
         var hours = hours2 - hours1, mins = 0, seconds = 0;
         if(hours < 0) hours = 24 + hours;
         if(mins2 >= mins1) {
             mins = mins2 - mins1;
         }
         else {
             mins = (mins2 + 60) - mins1;
             hours--;
         }

         if (seconds2 >= seconds1) {
                seconds = seconds2 - seconds1;
         }
         else {
                seconds = (seconds2 + 60) - seconds1;
            mins--;
         }

         seconds = seconds/60;
         mins += seconds;

         mins = mins / 60; // take percentage in 60
         hours += mins;
         //hours = hours.toFixed(4);
         $(".Hours").val(hours);
     }
     $(".Time1,.Time2").change(calculate);
     calculate();
 });

Solution 4

Here is an HTML Code

 <input type="text" name="start_time" id="start_time" value="12:00">
 <input type="text" name="end_time" id="end_time" value="10:00">
 <input type="text" name="time_duration" id="time_duration">

Here is javascript code

function timeCalculating()
  {
    var time1 = $("#start_time").val();
    var time2 = $("#end_time").val();
    var time1 = time1.split(':');
    var time2 = time2.split(':');
    var hours1 = parseInt(time1[0], 10), 
    hours2 = parseInt(time2[0], 10),
    mins1 = parseInt(time1[1], 10),
    mins2 = parseInt(time2[1], 10);
    var hours = hours2 - hours1, mins = 0;
    if(hours < 0) hours = 24 + hours;
    if(mins2 >= mins1) {
        mins = mins2 - mins1;
    }
    else {
      mins = (mins2 + 60) - mins1;
      hours--;
    }
    if(mins < 9)
    {
      mins = '0'+mins;
    }
    if(hours < 9)
    {
      hours = '0'+hours;
    }
    $("#time_duration").val(hours+':'+mins);
  }

View more solutions