Using FlipClock.js Countdown Timer with Moment.js Timezone

Problem

My client recently asked me to create a simple page to promote a new contest they were going to have every month. The layout was easy enough however they also wanted a Flip clock countdown timer to indicate how long the registration for new participants would last. So the timer would be different to each user depending where they’re located. The first idea that came to my head was the FlipClock.js plugin which I have tried some years before. However, although it looked good, it couldn’t determine the time difference from one timezone to another, which is far from what I 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 an easy-to-use javascript plugin that allows you to get the date & time from a specific timezone and use it however you want. So in my case, to show a different countdown to a different user from a different part of the world, I need to fetch their current time using the Date() object and subtract it with my client’s time in my client’s timezone (UTC +10 or Australia/Sydney).

The result would be the time difference between the two times which I will use for the FlipClock.js plugin. Most of the original source code below came from a 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.

Solution

Add these lines to your head tag:

Add the clock element to your body tag:

Then add this javascript code below the clock element or inside a separate js file:

Change the targetDate variable to your choosing.

And you’re done! If done correctly, you should now have a working FlipClock on your page. I’ve also added it to CodePen for you to see how it looks:

See the Pen FlipClock.js and MomentJS Timezone Countdown Timer by Elmer Balbin (@elmzarnsi) on CodePen.27172

Elmer Balbin

Web developer from Bacolod, Google Local Guide, and casual DotA 2 player.

about me

Leave a comment

avatar

Get great deals on hotel rooms from all over the world BOOK NOW