Search code examples
javascriptjquerydateflipclock

Difference in time between two dates in javascript?


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"
    });

Solution

  • 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>