18

I have two HTML input boxes, that need to calculate the time difference in JavaScript onBlur (since I need it in real time) and insert the result to new input box.

Format example: 10:00 & 12:30 need to give me: 02:30

Thanks!

3
  • Are you using Java, JScript, or Javascript? They're all different languages.
    – Paul
    Commented May 29, 2012 at 17:42
  • 2
    javascript is NOT a scripting language of java!
    – gdoron
    Commented May 29, 2012 at 17:42
  • Are they actual dates in the text box? Can you post the HTML and some sample data? Commented May 29, 2012 at 17:48

12 Answers 12

49

Here is one possible solution:

function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);

    // If using time pickers with 24 hours format, add the below line get exact hours
    if (hours < 0)
       hours = hours + 24;

    return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes;
}

DEMO: http://jsfiddle.net/KQQqp/

2
  • I want to show the seconds here. How can I do here?
    – Chinmay235
    Commented Jun 4, 2015 at 13:52
  • Outstanding solution and worked perfectly for my needs. Even calculates hours that cross midnight.
    – Tim
    Commented Mar 5, 2021 at 17:05
6

tl;dr

One off run

const t1 = new Date(1579876543210) // your initial time
const t2 = new Date(1579987654321) // your later time

const diff = t2-t1
const SEC = 1000, MIN = 60 * SEC, HRS = 60 * MIN
const humanDiff = `${Math.floor(diff/HRS)}:${Math.floor((diff%HRS)/MIN).toLocaleString('en-US', {minimumIntegerDigits: 2})}:${Math.floor((diff%MIN)/SEC).toLocaleString('en-US', {minimumIntegerDigits: 2})}.${Math.floor(diff % SEC).toLocaleString('en-US', {minimumIntegerDigits: 4, useGrouping: false})}`

console.log("humanDiff:", humanDiff)
// > humanDiff: 30:51:51.0111

As a function

function humanDiff (t1, t2) {
  const diff = Math.max(t1,t2) - Math.min(t1,t2) 
  const SEC = 1000, MIN = 60 * SEC, HRS = 60 * MIN
  
  const hrs = Math.floor(diff/HRS)
  const min = Math.floor((diff%HRS)/MIN).toLocaleString('en-US', {minimumIntegerDigits: 2})
  const sec = Math.floor((diff%MIN)/SEC).toLocaleString('en-US', {minimumIntegerDigits: 2})
  const ms = Math.floor(diff % SEC).toLocaleString('en-US', {minimumIntegerDigits: 4, useGrouping: false})
  
  return `${hrs}:${min}:${sec}.${ms}`
}

const t1 = new Date(1579876543210)
const t2 = new Date(1579987654321)

console.log("humanDiff(t1, t2):", humanDiff(t1, t2))
// > humanDiff: 30:51:51.0111

Explanation

Adjust humanDiff for your maximum and minimum reportable increments and formatting needs:

const t1 = new Date(1579876543210) // Set your initial time (`t1`)
const t2 = new Date(1579986654321) // , conclusion time (`t2`), and
const diff = t2-t1 // calculate their difference in milliseconds
console.log("         t2:", t2.toISOString()) // >   t2: 2020-01-25T21:27:34.321Z
console.log("         t1:", t1.toISOString()) // >   t1: 2020-01-24T14:35:43.210Z
console.log("       diff:", diff)             // > diff: 111111111

// Set your constant time values for easy readability
const SEC = 1000
const MIN = 60 * SEC
const HRS = 60 * MIN

/* For a given unit
1) disregard any previously relevant units, e.g. to calculate minutes, we can
   disregard all hours & focus on only the remainder - `(diff%HRS)`
2) divide the remainder by the given unit, e.g. for minutes, `(diff%HRS)/MIN`
3) disregard any remainder, e.g. again for minutes, `Math.floor((diff%HRS)/MIN)`
NOTE: for your maximum unit (HRS in the examples below) you probably _don't_
  want to disregard high values, e.g. If the difference is >24 hrs and something,
  you should either include a DAYS value, or simply display 30 hrs */
let hrs = Math.floor(diff/HRS)
let min = Math.floor((diff%HRS)/MIN)
let sec = Math.floor((diff%MIN)/SEC)
let ms  = Math.floor(diff % SEC) // just the remainder 
          // BUT ms IS NOT ACTUALLY CORRECT, see humanDiff_3 for the fix ;-)
let humanDiff_1 = `${hrs}:${min}:${sec}.${ms}`
console.log("humanDiff_1:", humanDiff_1)
// > humanDiff_1: 30:51:51.111

sec = Math.round((diff%MIN)/SEC) // can also just round the last unit
const humanDiff_2 = `${hrs} hrs ${min} mins & ${sec} secs`
console.log("humanDiff_2:", humanDiff_2)
// > humanDiff_2: 30 hrs 51 mins & 51 secs

/* To ensure a set number of digits, format the numbers with `toLocaleString`'s
   `minimumIntegerDigits`, if more than 3 digits, also use its `useGrouping`   */
hrs = Math.floor(diff/HRS)
min = Math.floor((diff%HRS)/MIN).toLocaleString('en-US', {minimumIntegerDigits: 2})
sec = Math.floor((diff%MIN)/SEC).toLocaleString('en-US', {minimumIntegerDigits: 2})
ms = Math.floor(diff % SEC).toLocaleString('en-US', {minimumIntegerDigits: 4, useGrouping: false})

const humanDiff_3 = `${hrs}:${min}:${sec}.${ms}`
console.log("humanDiff_3:", humanDiff_3)
// > humanDiff_3: 30:51:51.0111
// NOTE: milliseconds are now 4 digits

2
  • 1
    thank you for the function, why SEC = 1000 ?
    – Danish
    Commented Jan 31, 2021 at 14:51
  • SEC = 1000 is simply because 1 second is comprised of 1000 milliseconds; milliseconds are the base value for Date in Javascript.
    – MetaSean
    Commented Feb 1, 2021 at 15:10
4

Try This

var dif = ( new Date("1970-1-1 " + end-time) - new Date("1970-1-1 " + start-time) ) / 1000 / 60 / 60;
2

This solution works for calculating diff between to separate military times

Example format: start = 23:00 / end = 02:30

function diff(start, end) {
start = start.split(":");
end = end.split(":");
if(Number(start[0]) > Number(end[0]) ) {
  var num = Number(start[0])
  var countTo = Number(end[0]);
  var count = 0;
  for (var i = 1; num != countTo;) {
    num = num + i
    if(num > 24) {
      num = 0
    }
    count++
  }
  var hours = count - 1;
  var startDate = new Date(0, 0, 0, start[0], start[1], 0);
  var endDate = new Date(0, 0, 0, end[0], end[1], 0);
  if(startDate.getMinutes() > endDate.getMinutes()) {
    var hours = count - 2;
    var diff = 60 - (startDate.getMinutes() - endDate.getMinutes());      
  } else {
    var diff = endDate.getMinutes() - startDate.getMinutes();      
  }
  var minutes = diff
} else {
  var startDate = new Date(0, 0, 0, start[0], start[1], 0);
  var endDate = new Date(0, 0, 0, end[0], end[1], 0);
  var diff = endDate.getTime() - startDate.getTime();
  var hours = Math.floor(diff / 1000 / 60 / 60);
  diff -= hours * 1000 * 60 * 60;
  var minutes = Math.floor(diff / 1000 / 60);
}

var returnValue = (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes

return returnValue;

}

1
  • It dosent work with start : 5:30 End:5:00 Return 0-1:30 Commented Jan 20, 2021 at 9:24
1

Well this work almost great. Now use this code to calculate: 23:50 - 00:10 And see what you get.Or even 23:30 - 01:30. That's a mess. Because getting the answer the other way in php is:

$date1 = strtotime($_POST['started']);
$date2 = strtotime($_POST['ended']);
$interval = $date2 - $date1;
$playedtime = $interval / 60;

But still, it works like yours. I guess have to bring in the dates aswell?

And again: My hard research and development helped me.

if (isset($_POST['calculate'])) {
$d1 = $_POST['started'];
$d2 = $_POST['ended'];
if ($d2 < $d1) {
    $date22 = date('Y-m-');
    $date222 = date('d')-1;
    $date2 = $date22."".$date222;
} else {
$date2 = date('Y-m-d');
}
$date1 = date('Y-m-d');
$start_time = strtotime($date2.' '.$d1);
$end_time = strtotime($date1.' '.$d2); // or use date('Y-m-d H:i:s') for current time
$playedtime = round(abs($start_time - $end_time) / 60,2);
}

And that's how you calculate time over to the next day. //edit. First i had date1 jnd date2 switched. I need to -1 because this calculation only comes on next day and the first date vas yesterday.

After improving and a lot of brain power with my friend we came up to this:

$begin=mktime(substr($_GET["start"], 0,2),substr($_GET["start"], 2,2),0,1,2,2003);
$end=mktime(substr($_GET["end"], 0,2),substr($_GET["end"], 2,2),0,1,3,2003);
$outcome=($end-$begin)-date("Z");
$minutes=date("i",$outcome)+date("H",$outcome)*60; //Echo minutes only
$hours = date("H:i", $outcome); //Echo time in hours + minutes like 01:10 or something.

So you actually need only 4 lines of code to get your result. You can take only minutes or show full time (like difference is 02:32) 2 hours and 32 minutes. What's most important: Still you can calculate overnight in 24 hour clock aka: Start time 11:50PM to let's say 01:00 AM (in 24 hour clock 23:50 - 01:00) because in 12 hour mode it works anyway.

What's most important: You don't have to format your input. You can use just plain 2300 as 23:00 input. This script will convert text field input to correct format by itself. Last script uses standard html form with method="get" but you can convert it to use POST method as well.

0
1

This is an updated version of one that was already submitted. It is with the seconds.

function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * (1000 * 60 * 60);
    var minutes = Math.floor(diff / 1000 / 60);
    diff -= minutes * (1000 * 60);
    var seconds = Math.floor(diff / 1000);

    // If using time pickers with 24 hours format, add the below line get exact hours
    if (hours < 0)
       hours = hours + 24;

    return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes + (seconds<= 9 ? "0" : "") + seconds;
}

My Updated Version:

Allows for you to convert the dates into milliseconds and go off of that instead of splitting.

Example Does -- Years/Months/Weeks/Days/Hours/Minutes/Seconds

Example: https://jsfiddle.net/jff7ncyk/308/

1

With seconds you provided is not get result to me please find my updated function giving you the correct seconds here - By Dinesh J

function diff(start, end) {
    start = start.split(":");
    end = end.split(":");
    var startDate = new Date(0, 0, 0, start[0], start[1],start[2], 0);
    var endDate = new Date(0, 0, 0, end[0], end[1],end[2], 0);
    var diff = endDate.getTime() - startDate.getTime();
    var hours = Math.floor(diff / 1000 / 60 / 60);
    diff -= hours * 1000 * 60 * 60;
    var minutes = Math.floor(diff / 1000 / 60);
    var seconds = Math.floor(diff / 1000)-120;

    // If using time pickers with 24 hours format, add the below line get exact hours
    if (hours < 0)
        hours = hours + 24;

    return (hours <= 9 ? "0" : "") + hours + ":" + (minutes <= 9 ? "0" : "") + minutes+ ":" + (seconds <= 9 ? "0" : "") + seconds;
}
0

Depending on what you allow to enter, this one will work. There may be some boundary issues if you want to allow 1am to 1pm

NOTE: This is NOT using a date objects or moment.js

function pad(num) {
  return ("0"+num).slice(-2);
}
function diffTime(start,end) {
  var s = start.split(":"), sMin = +s[1] + s[0]*60,
      e =   end.split(":"), eMin = +e[1] + e[0]*60,
   diff = eMin-sMin;
  if (diff<0) { sMin-=12*60;  diff = eMin-sMin }
  var h = Math.floor(diff / 60),
      m = diff % 60;
  return "" + pad(h) + ":" + pad(m);
}  
document.getElementById('button').onclick=function() {
  document.getElementById('delay').value=diffTime(
      document.getElementById('timeOfCall').value, 
      document.getElementById('timeOfResponse').value
  );
}
<input type="time" id="timeOfCall">
<input type="time" id="timeOfResponse">
<button type="button" id="button">CLICK</button>
<input type="time" id="delay">

0
   calTimeDifference(){
    this.start = dailyattendance.InTime.split(":");
    this.end = dailyattendance.OutTime.split(":");
    var time1 = ((parseInt(this.start[0]) * 60) + parseInt(this.start[1]))
    var time2 = ((parseInt(this.end[0]) * 60) + parseInt(this.end[1]));
    var time3 = ((time2 - time1) / 60);
    var timeHr = parseInt(""+time3);
    var  timeMin = ((time2 - time1) % 60);
}
0

TimeCount = function()
{
    t++;
    var ms = t;
    if (ms == 99)
    {
        s++;
        t = 0;
        if ( s == 60)
        {
            m++;
            s = 0;
        }
    }

    Dis_ms = checkTime(ms);
    Dis_s = checkTime(s);
    Dis_m = checkTime(m);
    
    document.getElementById("time_val").innerHTML = Dis_m + ":" + Dis_s+ ":" + Dis_ms;
}

function checkTime(i) 
{
  if (i<10) {
    i = "0" + i;
  }
  return i;
} 

1
  • This code is incomplete - is this an answer or an attempt to ask some question?
    – barbsan
    Commented Jun 14, 2019 at 12:36
-1

Try this: actually this a problem from codeeval.com

I solved it in this way .

This program takes a file as the argument so i used a little node js to read the file.

Here is my code.

var fs  = require("fs");
fs.readFileSync(process.argv[2]).toString().split('\n').forEach(function (line) {
    if (line !== "") {
        var arr = line.split(" ");
        var arr1 = arr[0].split(":");
        var arr2 = arr[1].split(":");
        var time1 = parseInt(arr1[0])*3600 + parseInt(arr1[1])*60 + parseInt(arr1[2]);
        var time2 = parseInt(arr2[0])*3600 + parseInt(arr2[1])*60 + parseInt(arr2[2]);
        var dif = Math.max(time1,time2) - Math.min(time1,time2);
        var ans = [];
        ans[0] = Math.floor(dif/3600);
        if(ans[0]<10){ans[0] = "0"+ans[0]}
        dif = dif%3600;
        ans[1] = Math.floor(dif/60);
        if(ans[1]<10){ans[1] = "0"+ans[1]}
        ans[2] = dif%60;
        if(ans[2]<10){ans[2] = "0"+ans[2]}
        console.log(ans.join(":"));
    }
});
1
  • When OP said HTML input boxes and javascript onBlur event, i think he was clear that the arguments aren't supposed to be from a file.
    – jagc
    Commented Mar 17, 2016 at 1:40
-2

We generally need time difference to estimate time taken by I/O operations, SP call etc, the simplest solution for NodeJs (the console is in callback- async execution) is following:

var startTime = new Date().getTime();
//This will give you current time in milliseconds since 1970-01-01

callYourExpectedFunction(param1, param2, function(err, result){
    var endTime = new Date().getTime();
    //This will give you current time in milliseconds since 1970-01-01

    console.log(endTime  - startTime)
    //This will give you time taken in milliseconds by your function

   if(err){
   }
   else{
   }
})

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.