How to work out time difference between two times

Question

I have a problem with some code I have been producing in JavaScript. I want to calculate the difference between two times on a 24 hour clock. The data comes from two input time fields:

<input type="time" id="start" />
<input type="time" id="end" />

Because of this the times come in a string 00:00, which doesn't help for number calculations.

The way I worked it out was to minus the start from the end. This works perfectly if the the end time is greater, however if the end time is past 11:00 (00:00), I end up with a negative number. I have tried adding 24 to the result if the end is lower than the start but I still get a negative number. This may seem like a dumb question but I was never that good at maths.

var numHours;
if(time_end < time_start){
    numHours = parseInt(t_e.substring(0,2)) - parseInt(t_s.substring(0,2)) + 24;
}else{
    numHours = parseInt(t_e.substring(0,2)) - parseInt(t_s.substring(0,2));
}

There is probably (definitely) a better way of doing this but how can I get this to work. Also could I calculate the minutes as well to get more accurate time difference.

Answer 1

I'm a beginner, and some whiz is probably going to come up with an answer in like 2 lines :), but here it is.....this works. input is a string in the form of "1:20pm-2:30am".

function CountingMinutesI(str) { 
split = str.split('-')
startTime = split[0]
endTime = split[1]

// for end time
   if (endTime === '12:00am')  { endInMinutes = 0}
   else if (endTime.charAt(endTime.length-2) === 'a') {
     if (endTime.substr(0, 2) === '12') { 
       endInMinutes = parseInt(endTime.split(':')[1].replace(/[a-z]/gi, ''))
     }
     else {
     endHours = endTime.split(':')[0]
     endMins = endTime.split(':')[1].replace(/[a-z]/gi, '')
     endInMinutes = (parseInt(endHours)*60) + parseInt(endMins)
     }
   }

   else if (endTime === '12:00pm') {endInMinutes = 720}

   else {
     endHours = endTime.split(':')[0]
     endMins = endTime.split(':')[1].replace(/[a-z]/gi, '')
     endInMinutes = (parseInt(endHours)*60 + 720) + parseInt(endMins)
   }  

// for start time
   if (startTime === '12:00am')  { startInMinutes = 0}

   else if (startTime.charAt(startTime.length-2) === 'a') {
      if (startTime.substr(0, 2) === '12') { 
       startInMinutes = parseInt(startTime.split(':')[1].replace(/[a-z]/gi, ''))
      }
      else {
      startHours = startTime.split(':')[0]
      startMins = startTime.split(':')[1].replace(/[a-z]/gi, '')
      startInMinutes = (parseInt(startHours)*60) + parseInt(startMins)
      }  
    }

   else if (startTime.substr(0,2) === '12') {startInMinutes = 720 + parseInt(startTime.split(':')[1].replace(/[a-z]/gi, ''))}
   else {
     startHours = startTime.split(':')[0]
     startMins = startTime.split(':')[1].replace(/[a-z]/gi, '')
     startInMinutes = (parseInt(startHours)*60 + 720) + parseInt(startMins)
   }  

   if (endInMinutes > startInMinutes) {output = endInMinutes - startInMinutes}
   else {output = 1440 - (startInMinutes - endInMinutes)}

return output
}

Answer 2

The solutions provided aren't accounting for the day boundary effectively. And all of this assumes the difference is less than 24 hours. Meaning that we have an upper boundary on the difference between start and end of 23 hours and 59 minutes, otherwise we are confused by the result. But remember that as described a real use case is that an event starts at 11pm and ends at 1am (from 23:00 to 1:00) and the difference is 2 hours NOT 22 hours.

function calculateTime(e) {
   var startTime = $('#start').val();
   var endTime = $('#end').val();

   var startTimeArray = startTime.split(":");
   var startInputHrs = parseInt(startTimeArray[0]);
   var startInputMins = parseInt(startTimeArray[1]);

   var endTimeArray = endTime.split(":");
   var endInputHrs = parseInt(endTimeArray[0]);
   var endInputMins = parseInt(endTimeArray[1]);

   var startMin = startInputHrs*60 + startInputMins;
   var endMin = endInputHrs*60 + endInputMins;

   var result;

   if (endMin < startMin) {
       var minutesPerDay = 24*60; 
       result = minutesPerDay - startMin;  // Minutes till midnight
       result += endMin; // Minutes in the next day
   } else {
      result = endMin - startMin;
   }

   var minutesElapsed = result % 60;
   var hoursElapsed = (result - minutesElapsed) / 60;

   alert ( "Elapsed Time : " + hoursElapsed + ":" + (minutesElapsed < 10 ?
            '0'+minutesElapsed : minutesElapsed) ) ;
}

And I didn't check, but I believe you could just do this, but I'm not checking it :

var result = endMin - startMin;
if (result < 0 ) result = (24*60) + result;

Answer 3

A simple solution that might work best for this limited use-case is to convert both times into total minutes since the start of the day, and then subtract.

Pseudocode:

startMin = startInputHrs * 60 + startInputMin
endMin = endInputHrs * 60 + endInputMin

timeDifference = endMin - startMin

It's up to you how you want to handle a negative result. Maybe give the user an error message, and tell them that the start time has to come before the end time?