Creating a Flip Clock Countdown Timer with Moment.js Timezone

Background

I was asked by my client to create a simple page to promote a new monthly contest. On it, they wanted a flip clock countdown timer to indicate how long the registration would last for new participants. So the timer would be different for each user depending on where they’re located.

Finding a solution

The first solution that came to my head was the FlipClock.js plugin which I have tried some years before. However, it couldn’t determine the time difference from one timezone to another. This was a bit off from what was needed since the participants were from different countries.

And that’s when I remembered using another plugin that did just that.

Moment.js Timezone is a javascript plugin that allows you to get the date and time from a specific timezone. In my case, to show a different countdown to a different user from anywhere in the world, I only need to fetch their current time and subtract it with my client’s time in my client’s timezone (UTC +10 or Australia/Sydney).

The result would be the difference between the two times which I will use for the FlipClock.js plugin. Most of the original source code below came from an existing solution posted by a certain kinganu in FlipClock’s Github page but there were some bugs so I modified and improved it based on my needs.

Final code

<head>

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://momentjs.com/downloads/moment-timezone-with-data-2012-2022.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css" rel="stylesheet">

<body>

<div class="clock"></div>

Custom JS file

$(document).ready(function() {
  var clock;

  // Grab the current date
  var currentDate = new Date();

  // Target future date/24 hour time/Timezone.
  var targetDate = moment.tz("2020-09-30 23:59", "Australia/Sydney");

  // Calculate the difference in seconds between the future and current date
  var diff = targetDate / 1000 - currentDate.getTime() / 1000;

  if (diff <= 0) {
    // If remaining countdown is 0
    clock = $(".clock").FlipClock(0, {
      clockFace: "DailyCounter",
      countdown: true,
      autostart: false
    });
    console.log("Date has already passed!")
    
  } else {
    // Run countdown timer
    clock = $(".clock").FlipClock(diff, {
      clockFace: "DailyCounter",
      countdown: true,
      callbacks: {
        stop: function() {
          console.log("Timer has ended!")
        }
      }
    });
    
    // Check when timer reaches 0, then stop at 0
    setTimeout(function() {
      checktime();
    }, 1000);
    
    function checktime() {
      t = clock.getTime();
      if (t <= 0) {
        clock.setTime(0);
      }
      setTimeout(function() {
        checktime();
      }, 1000);
    }
  }
});

Change the targetDate value to any date and timezone you like but make sure it’s in the future. If not, the countdown timer will only show zeroes.

Feel free to copy the code from CodePen and customize it to your liking.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.