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=".3.1/jquery.min.js"></script>
<script src=".js/2.22.2/moment.min.js"></script>
<script src=".5.23/moment-timezone.min.js"></script>

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./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment-timezone/0.5.23/moment-timezone.min.js"></script>

• javascript
• momentjs
• moment-timezone

• How do you load the moment-timezone library? Can you post your HTML tags that load the lib? – Felipe Plets Commented Dec 19, 2018 at 21:24
• See update at the bottom of the question @FelipePlets – user8331511 Commented Dec 19, 2018 at 21:26
• Your code looks correct. It will take less time to help you if you create a jsfiddle next time – Max Martynov Commented Dec 19, 2018 at 21:33

4 Answers 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./ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.js"></script>

Instead of:

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

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./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)

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./ajax/libs/moment.js/2.22.2/moment.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/moment-timezone/0.5.23/moment-timezone-with-data.js"></script>

This is from the moment timezone docs

"POSIX patibility 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.