Search code examples
javascriptmomentjsmoment-timezone

Momentjs showing the same time for multiple time zones

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:

image

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>
Solution

  • 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>