Momentjs showing the same time for multiple time zones

Question

So I'm trying to get various time zones, and I have set up the times, however, the same time is being displayed in all zones.

Here is my code:

const format = 'HH:MM'

// San Francisco - Time
let sanFrancisco = moment().tz('Etc/GMT-8').format(format)
document.querySelector('.sanFrancisco').innerHTML = sanFrancisco + ' GMT-8';

// Mexico City - Time
let mexicoCity = moment().tz('Etc/GMT-6').format(format)
document.querySelector('.mexicoCity').innerHTML = mexicoCity + ' GMT-6'

// New York City - Time
let newYorkCity = moment().tz('Etc/GMT-5').format(format)
document.querySelector('.newYork').innerHTML = newYorkCity + ' GMT-5'

// Montréal - Time
let montreal = moment().tz('Etc/GMT-5').format(format)
document.querySelector('.montreal').innerHTML = montreal + ' GMT-5'

// London - Time
let london = moment().tz('Etc/GMT+0').format(format)
document.querySelector('.london').innerHTML = london + ' GMT+0'

Here is what I'm seeing:

As for loading I'm just using the CDN like:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone.min.js"></script>

How do you load the moment-timezone library? Can you post your HTML tags that load the lib? — Felipe Plets, Dec 19 '18 at 21:24
Your code looks correct. It will take less time to help you if you create a jsfiddle next time — Max Martynov, Dec 19 '18 at 21:33

Felipe Plets · Accepted Answer · 2018-12-19T21:38:57.863

4

As you are not loading the Moment Timezone with time zones, you would need to add each one you want to use. To add all timezones you can simply load the following file:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.js"></script>

Instead of:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone.min.js"></script>

edited Dec 19 '18 at 21:38

answered Dec 19 '18 at 21:32

Felipe Plets

7,230
3
36
60

1

Still doesn't work, might be worth noting I was (and still am) getting this error https://gyazo.com/36e68a581fd535b10d5345fc083f9f64 – Dec 19 '18 at 21:36
@B.J.B, got it. Try to change the moment-timezone then. I've changed the answer to the right one. – Felipe Plets Dec 19 '18 at 21:39

score 3 · Answer 2 · answered Dec 19 '18 at 21:35

You are most likely getting following error in the background, it doesn't prevent displaying the formatted date but it won't add the zone offset:

moment-timezone.min.js:1 Moment Timezone has no data for Etc/GMT+0. See http://momentjs.com/timezone/docs/#/data-loading/.

You need to load the timezone with moment.tz.add() before using it. For example for Los Angeles:

moment.tz.add('America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0');
let kobe = moment().tz('America/Los_Angeles').format(format)

benvc · Answer 3 · 2021-10-01T21:58:34.067

You need to change your format from 'HH:MM' to 'HH:mm'.

MM is for the month, but you are looking for minutes which is mm.

You also need to be careful with the signs in these Etc/GMT-X time zones. You specified Etc/GMT-8 for San Francisco but the signs for these time zones are inverted, so it is really Etc/GMT+8 (just another reason it is better to use the time zone name).

For example:

const sf = moment().tz('America/Los_Angeles').format('HH:mm');
const sfetc = moment().tz('Etc/GMT+8').format('HH:mm');
console.log(sf);
console.log(sfetc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.js"></script>

score 1 · Answer 4 · answered Dec 19 '18 at 21:38

This is from the moment timezone docs

"POSIX compatibility requires that the offsets are inverted. Therefore, Etc/GMT-X will have an offset of +X and Etc/GMT+X will have an offset of -X. This is a result of IANA's Time Zone Database and not an arbitrary choice by Moment.js. Thus, using locality based identifiers is preferred over fixed-offset identifiers.

For example, moment().tz('Etc/GMT+1').format('YYYY-MM-DD HH:mm ZZ') will return 2014-12-18 11:22 -0100 while moment().tz('Europe/Madrid').format('YYYY-MM-DD HH:mm ZZ') will return 2014-12-18 13:22 +0100. The Europe/Madrid indentifer should be used instead of the Etc/GMT+1 identifier."

Essentially, you should use the city name identifiers instead of the Etc/GMT+1 identifier.

Here is a link to the timezone identifiers you should use.

Momentjs showing the same time for multiple time zones

4 Answers4