Javascript function to calculate the hours remaining to specific date or time

Question

I need to count the remaining time in hours between today or actual date/time and a specific end date at 00:00 hrs.

I tried in this fiddle, but I get the counting of one month more than it should be.

var endTime = new Date(2019,10,18,0,0,0) / 1000;
function setClock() {
    var elapsed = new Date() / 1000;
    var totalTime =  endTime - elapsed;
    var hr = parseInt(totalTime / 3600)
    var min = parseInt(totalTime / 60) % 60;
    var sec = parseInt(totalTime % 60, 10);
    var result = hr + " hours, " + min + " minutes " + sec + " seconds";
    document.getElementById('timeRemaining').innerHTML = result;
    setTimeout(setClock, 1000);
}
setClock();

If I enter one month less in the "endTime" variable I get the correct result in hours count, but this is not fine I need to enter the real end date without the need to subtract one month.

Thanks

`new Date(2019,10,18,0,0,0)` creates a date for 18 November, not 18 October. — RobG, Oct 18 '19 at 01:09

score 4 · Accepted Answer · answered Oct 18 '19 at 01:38

The code below is mostly your code with one change. I changed the input for endTime to an ISO format and omitted the time Zone. This, in theory, will default to your browser's timezone. I tested on your linked and it worked. Here is some additional information https://www.w3schools.com/js/js_date_formats.asp

var endTime = new Date("2019-10-18T00:00:00") / 1000;
function setClock() {
    var elapsed = new Date() / 1000;
    var totalSec =  endTime - elapsed;
    var h = parseInt( totalSec / 3600 )
    var m = parseInt( totalSec / 60 ) % 60;
    var s = parseInt(totalSec % 60, 10);
    var result = h + " hours, " + m + " minutes " + s + " seconds";
    document.getElementById('timeRemaining').innerHTML = result;
    setTimeout(setClock, 1000);
}
setClock();

score 3 · Answer 2 · answered Oct 18 '19 at 00:50

Here is a working solution with Vanilla JS:

 var calcTime = setInterval(function(){
    date_future = new Date(2019,10,18,0,0,0)
    date_now = new Date();

    seconds = Math.floor((date_future - (date_now))/1000);
    minutes = Math.floor(seconds/60);
    hours = Math.floor(minutes/60);
    days = Math.floor(hours/24);

    hours = hours-(days*24);
    minutes = minutes-(days*24*60)-(hours*60);
    seconds = seconds-(days*24*60*60)-(hours*60*60)-(minutes*60);

It's pretty easier with JQuery → http://hilios.github.io/jQuery.countdown/examples/show-total-hours.html

Thanks!! Looks very nice and clean!! :D – AlonsoCT Oct 18 '19 at 00:57 — AlonsoCT, Oct 18 '19 at 00:57

score 1 · Answer 3 · answered Oct 18 '19 at 00:50

JavaScript counts months from 0 to 11. January is 0. December is 11. I think you were thinking that endTime will be October 18th, 2019 but actually it's November 18th, 2019. You can see more relevant information here. https://www.w3schools.com/js/js_dates.asp Thanks.

edelwater · Answer 4 · 2019-10-18T19:36:22.800

If between the start-datetime and end-datetime a change takes place in winter / summertime remember to make summertime/wintertime adjustments
(if you get these values from e.g. an api:) if the startdate is specified by a client in location x and enddate is specified in location y, you have take into account that the startdate could potentially be in 00:00:00+14:00 timezone and end the endate in max -14 timezone.
if you only present 2 timeboxes: time 1 and time 2, you can map these anywhere on a 52 hours time-scale: -14 , +14 and the 24 hours gmt timescale where you then would normalize to. ( 0:00 could mean i am in Samoa +14, 14 hours ahead of the end of GMT 23:59:59 (14 further) or ahead of GMT 0:00 (14+24 further). Then there are countries which make local time decisions e.g. in India with +5.5 UTC or Burma +6.5 or newfoundland -3.5.

Since this is stackexchange and people will copy and paste these examples in their applications even if these applications are "on the internet" and so DO have users from every location in the world.

Therefore ... use a library: https://momentjs.com/ ; Get hours difference between two dates in Moment Js they have a helper https://momentjs.com/docs/#/displaying/to/ and see also: Moment.js - How To Detect Daylight Savings Time And Add One Day

You can see the same bug on https://www.timeanddate.com/countdown but they added in words : https://www.timeanddate.com/countdown/one-hour-offwintertijd (and they assume the end datetime is in the same location as the countdown datetime)

I added this because i had to bugfix exactly his week a bug on #1 (summertime/wintertime) for a simple application but it was used by a lot of people causing some problems. I thought I was going crazy: with same startdatetime-enddatetime i got the correct output and with some it was diferent. Took me some to get the aha! moment (always 1 hour) (hmmmmm) (because i first thought in competely different directions, someone had changed something and I thought it was in that direction). It did not drop in my mind that it was an existing bug inside a default library never touched. — edelwater, Oct 18 '19 at 18:52

Javascript function to calculate the hours remaining to specific date or time

4 Answers4