How to use a timezone in moment

… or how was the biggest mystery in JavaScript demystified.

If you’ve been working with JavaScript for quite time, I am sure you have encountered dates and times.

No big deal, new Date(). Done.

The you might have found about moment. This interesting piece of library that allowed you to format dates in a very intuitive way, like for example moment(new Date()).format('YYYY-MM-DD').

So you decided to format dates in your application, for example:

import React from 'react';
import moment from 'moment';

const MyComponent = ({timestamp}) => {	
	return (
		<time datetime={moment(timestamp).format('YYYY-MM-DDThh:mm:ssTZD')}>
			{moment(timestamp).format("m/d/y")}
		</div>
	);
};

A few days after implementing you find out, that one user of your app sees totally different date and time than the other one.

What the heck is going on?

The answer: Nothiin!

Timezones

When implementing your code, you did not think about one important thing to have on mind when working with dates – and that is timezones.

You see time on your computer for example “8:19pm”, that time has been converted to a timezone of your region.

For example if you are located in Sydney, you see totally different time than a person in New York. Yet that time has a single value in the database of the application.

How does it work?

Simply. The backend when rendering content sends 3 values to the frontend:

  • a timestamp in the base format (in the basic UTC+00 timezone)
  • a timezone of a person in New York
  • a timezone of a person in Sydney

Then, it is your responsibility as a programmer to convert the timestamp into the correct timezone.

JavaScript as well as moment work with timezones perfectly. But they work with a default timezone out of a box, so seamingly it seems that the timezones do not exist.

Yet that is not true. Timezones do exist, but moment just works with the default one – and this is the source of lots of problems.

Converting a timestamp to a timezone

Converting a timestamp to a timezone should be on your mind every time you work with dates and times.

This is very simple process, if you have 4 questions on mind:

  • What is the timestamp’s timezone?
  • What is the timezone that the timestamp should be converted into?
  • Which JS function am I going to use to do the conversion?
  • How do I set a source timezone and how do I set the target timezone?

Converting timezones with moment

1. Convert from UTC to a timezone

So, having our 4 questions on mind, we can start the conversion.

What is the timestamp’s timezone? UTC
What is the timezone that the timestamp should be converted into? Australia/Sydney
Which JS function am I going to use to do the conversion? moment
How do I set a source timezone and how do I set the target timezone? moment.utc()

So, that’s it. Questions answered, let’s try it out:

import moment from 'moment-timezone';

const timestamp = '2021-01-10 01:10:01';
 moment.utc(timestamp).tz('Australia/Sydney').format("hh:mm");
//outputs 12:10
//Sydney is 11 hours ahead of UTC

Neat, right? 😉

Wrapping up

In this article I showed you how to correctly convert timestamps from UTC to a specific timezone using moment library.

Working with timezones is real easy. You don’t even have to be working with monent, but be sure to always check the 4 questions not to make any unintentional bug in your application.

What is the timestamp’s timezone?

What is the timezone that the timestamp should be converted into?

Which JS function am I going to use to do the conversion?

How do I set a source timezone and how do I set the target timezone?

TapdDancingToCode.com

Yours in coding,

Ivan

Sources:

Leave a comment

Your email address will not be published. Required fields are marked *