Calculate time difference from two time inputs in HH:MM:SS format in Javascript

Question

I am trying to calculate the time difference of what a user inputs in my HTML form. The JavaScript in turn should show the user in real time what the difference is while also returning the value into an hidden input.
Here is the HTML:

<input type="time" id="timeOne" name="timeOne" value="00:00:01" step="1"  onchange="timeFunction()">    
<input type="time" id="timeTwo" name="timeTwo" value="00:00:01" step="1"  onchange="timeFunction()">
<b>Time Difference: </b> <p id="timeDifference">--:--:--</p>
<input type="hidden" id="timeDiff" name="timeDiff">

How can I go about doing this? I have attempted this method but receive a NaN error. I am also unsure how to put it back together to return the time difference into the hidden input should this work.

function timeFunction(){
 var timeOneValue = document.getElementById("timeOne").value;
 var timeTwoValue = document.getElementById("timeTwo").value;

 var res = Math.abs(timeTwoValue - timeOneValue) / 1000;                          
 // get hours        
 var hours = Math.floor(res / 3600) % 24;        
      
 // get minutes
 var minutes = Math.floor(res / 60) % 60; 
  
 // get seconds
 var seconds = res % 60;  
      
 document.getElementById("timeDifference").innerHTML = (hours + ":" + minutes + ":" + seconds);
}

Your `res` variable is effectively getting the value output from doing this: `"00:00:01" - "00:00:01"` - that gives NaN, obviously. Have you considered to split the String first by `:` and then figuring out the total seconds using some simple arithmetic? — codefactor, Apr 12 '21 at 19:53
related question [How to format the date to (dd/mm/yyyy hh:mm:ss)](https://stackoverflow.com/questions/66957467/how-to-format-the-date-to-dd-mm-yyyy-hhmmss) — Jatniel, Apr 12 '21 at 20:11

score 3 · Accepted Answer · answered Apr 12 '21 at 20:05

You can split each time string on : and then convert it to seconds in order to calculate the difference.

function timeFunction() {
  const getSeconds = s => s.split(":").reduce((acc, curr) => acc * 60 + +curr, 0);
  var seconds1 = getSeconds(document.getElementById("timeOne").value);
  var seconds2 = getSeconds(document.getElementById("timeTwo").value);

  var res = Math.abs(seconds2 - seconds1);

  var hours = Math.floor(res / 3600);

  var minutes = Math.floor(res % 3600 / 60);

  var seconds = res % 60;
  document.getElementById("timeDifference").innerHTML = hours + ":" + minutes + ":" + seconds;
}

<input type="time" id="timeOne" name="timeOne" value="00:00:01" step="1" onchange="timeFunction()">
<input type="time" id="timeTwo" name="timeTwo" value="00:00:01" step="1" onchange="timeFunction()">
<b>Time Difference: </b>
<p id="timeDifference">--:--:--</p>
<input type="hidden" id="timeDiff" name="timeDiff">

Note that this doesn't pad the time output with zeroes, resulting in nonsensical times like "0:3:2". — Martha, May 27 '22 at 20:59

score 0 · Answer 2 · answered Apr 12 '21 at 19:50

0

The problem is likely that you're getting text/strings from your HTML element .values, and you need to convert them into numbers (with parseInt() or somesuch) to do math on them.

answered Apr 12 '21 at 19:50

Marc Majcher

11
1

Calculate time difference from two time inputs in HH:MM:SS format in Javascript

2 Answers2