JavaScript incorrect time showing between two time

Question

I have tried to show time between two time while page load. Please check below my code -

var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

function hourDiff(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);
    
    return (hours < 9 ? "0" : "") + hours + ":" + (minutes < 9 ? "0" : "") + minutes;
    //setTimeout(function(){hourDiff(start, end)},500);
}

document.getElementById("diff").value = hourDiff(start, end);

<input id="start" value="20:00"> <!-- 08.00 PM -->
<input id="end" value="09:30"> <!-- 09.30 AM -->

<input id="diff">

I have used start time 20.00 and end time 09.30 the different between two time is = 13.30 hours but it is showing wrong hour. Please check and let me know.

Edit:

Also I want to the how many hour:minute:second left

Sorry I was written another question. By-mistake title not changed. — Chinmay235, Jun 04 '15 at 13:41
Don't the fact that you're creating two `Date` with the same date but with different hours and the fact that the two hours you want are during different days cause a problem ? I guess they do — tektiv, Jun 04 '15 at 13:42
[Try this answer](http://stackoverflow.com/questions/21516809/how-to-get-time-difference-between-two-timestamps-in-seconds-with-jquery) .... Or .. [This Answer](http://stackoverflow.com/questions/11883768/jquery-time-difference-in-hours-from-two-fields) — mk117, Jun 04 '15 at 14:01

Wa Kai · Answer 1 · 2015-06-05T12:04:31.383

~~If your dates are always in the same format hh:mm, why don't you try my suggestion.~~

It is quite simple:

var hours = end[0] - start[0];
if(start[0] > end[0]) {
    hours = 24 + hours;
}

var minutes = end[1] - start[1];
if(start[1] > end[1]) {
    minutes = 60 + minutes;
    if(hours == 0) {
        hours = 23;
    } else {
        hours--;
    }
}

I just substract them each other and react if the start value is bigger than the end value. Fiddle: https://jsfiddle.net/rvwr9h0w/1/

Edit

I found a simpler solution, because of Shotgun Ninja's post:

https://jsfiddle.net/rvwr9h0w/4/

var endDate = new Date(0, 0, (start > end)?1:0 , end[0], end[1], end[2]);

If the start time is bigger than the end time, just set the end date 1 day ahead.

score 1 · Answer 2 · answered Jun 04 '15 at 13:55

Okay, the problem with your code here is that you're subtracting an earlier time from a later time, which results in a negative time difference. I think what you meant to do was to have the system subtract 9:30am the next day from 8:00pm the previous day, but you've supplied no information that would indicate that they are separate days.

You have:

var startDate = new Date(0, 0, 0, 20, 0, 0); // 8:00pm, Dec 31st, 1899 (current TZ)
var endDate = new Date(0, 0, 0, 9, 30, 0);    // 9:30am, Dec 31st, 1899 (current TZ)

(Year = 0 corresponds to 1900, Month = 0 corresponds to January, and Day = 0 corresponds to 1 day before the 1st, which rolls back to Dec 31.)

The important part here is that by setting all values to 0, you're getting the same day, but a different hour. So you're actually getting a negative value in the diff; the code functions correctly, but is giving you a negative hour value because the dates are out of order.

score -2 · Answer 3 · answered Jun 04 '15 at 14:01

Try using Math.floor with the whole math equation required for each part:

var start = document.getElementById("start").value;
var end = document.getElementById("end").value;

function hourDiff(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 msec = diff;
var hh = Math.floor(msec / 1000 / 60 / 60);
msec -= hh * 1000 * 60 * 60;
var mm = Math.floor(msec / 1000 / 60);
    
    return hh + ":" + mm;
    //setTimeout(function(){hourDiff(start, end)},500);
}

document.getElementById("diff").value = hourDiff(start, end);

<input id="start" value="20:00"> <!-- 08.00 PM -->
<input id="end" value="09:30"> <!-- 09.30 AM -->

<input id="diff">

I answered what I thought was the question; the user wanted the " time between two time", I provided that. — omikes, Jun 04 '15 at 14:18

JavaScript incorrect time showing between two time

3 Answers3