Difference in time between two dates in javascript?

Question

I am trying to make a countdown clock until the inauguration on January 20, 2017 at approximately 12:00pm using flipclock.js

How do I calculate the difference (in seconds) between the current time and that date/time?

I currently have:

var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = inauguration - now;
var clock = $('#clock').FlipClock(diff, {
    countdown: true,
    clockFace: "DailyCounter"
});

Got it working:

    var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
    var now = Date.now();
    var diff = inauguration.getTime() - now;
    diff = diff / 1000;
    var clock = $('#clock').FlipClock(diff, {
        countdown: true,
        clockFace: "DailyCounter"
    });

Haha yeah, although I think it is a bit different than what @Dalorzo linked. We got it working with the answer below. Teamwork makes the dream work `:D` — Parker Thomas, Jan 02 '17 at 00:34
When creating a date, don't parse a string, pass arguments directly to the Date constructor: `new Date(2017,0,20,12)`. It's less to type and less problematic given that built–in parsing is mostly implementation dependent. ;-) — RobG, Jan 02 '17 at 05:55

Praveen Kumar Purushothaman · Accepted Answer · 2017-01-02T00:38:27.363

3

Currently inauguration is a Date object. You can get the number of seconds by .getTime() function. You need to change:

var diff = inauguration.getTime() - now;
//---------------------^^^^^^^^^^

Your working code should be:

var inauguration = new Date(2017, 00, 20, 12, 0, 0, 0);
var now = Date.now();
var diff = inauguration.getTime() - now;
diff = diff / 1000;
var clock = $('#clock').FlipClock(diff, {
    countdown: true,
    clockFace: "DailyCounter"
});

The idea of getTime() was part of the solution, and along with a couple of other minor changes the above code is now working.

Also, the original implementation works as well:

var inauguration = new Date("January 20, 2017 12:00:00");
var now = Date.now();
var diff = (inauguration.getTime() - now) / 1000;
var clock = $('#clock').FlipClock(diff, {
  countdown: true,
  clockFace: "DailyCounter"
});

<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.min.js"></script>
<div id="clock"></div>

edited Jan 02 '17 at 00:38

answered Jan 02 '17 at 00:20

Praveen Kumar Purushothaman

164,888
24
203
252

Hmm...that gives me 18693 days. Any idea what's wrong? – Parker Thomas Jan 02 '17 at 00:21
I got it after I looked at this: http://stackoverflow.com/questions/2024198/how-many-seconds-between-two-dates – Parker Thomas Jan 02 '17 at 00:24
@ParkerThomas Tell me what's the issue, I'll update my answer, so that you can accept it. – Praveen Kumar Purushothaman Jan 02 '17 at 00:25
Take a look at my original question, I added the working code. – Parker Thomas Jan 02 '17 at 00:26
Oh okay, they are milliseconds... `:D` – Praveen Kumar Purushothaman Jan 02 '17 at 00:27
1

But, yeah... I gave the idea of using `.getTime()` right? `:)` – Praveen Kumar Purushothaman Jan 02 '17 at 00:28
Yep. Divided by 1000 and also remembered that JS counts January as `00`. Oops :D – Parker Thomas Jan 02 '17 at 00:28
Yea, that's true... Months are 0 indexed. – Praveen Kumar Purushothaman Jan 02 '17 at 00:29
@ParkerThomas Approved boss. – Praveen Kumar Purushothaman Jan 02 '17 at 00:31
I edited your answer to include the working code. Once it is peer reviewed I can mark it as correct. Thanks! – Parker Thomas Jan 02 '17 at 00:31
@ParkerThomas It's reviewed and approved. You should have got 2 points. – Praveen Kumar Purushothaman Jan 02 '17 at 00:31
I agree. Looks like it's gone. Not sure how that happened. – Parker Thomas Jan 02 '17 at 00:35
@ParkerThomas Also, you can keep the original version of `new Date("January 20, 2017 12:00:00");`... – Praveen Kumar Purushothaman Jan 02 '17 at 00:35
@ParkerThomas I reopened. – Praveen Kumar Purushothaman Jan 02 '17 at 00:35
@ParkerThomas Check my answer now, with the snippet. – Praveen Kumar Purushothaman Jan 02 '17 at 00:38
1

FWIW, it's not necessary to call `.getTime()`. The date object is converted to a number automatically. I.e. `inauguration.getTime() - now` and `inauguration - now` produce the same result. It's still good to be explicit about it, but it's not *necessary*. – Felix Kling Jan 02 '17 at 01:15
@FelixKling I came to know after some time... `:D` – Praveen Kumar Purushothaman Jan 02 '17 at 02:44

Difference in time between two dates in javascript?

1 Answers1