List Available Time Zone Using Moment.js

A Time Zone is a region of the globe that observes a uniform standard time for legal, commercial, and social purposes. It plays an important role on our day to day life, Where based on the time zone we are calculating the date and time for different countries and regions.

Web applications are globalized, people from different country/region will use the web application at one instant. In this case the time should various based on peoples in different region. There are various libraries and modules available on the internet to calculate date/time based on timezone. In this article we are going to discuss about time zone Using Moment.js

Moment.js is a JavaScript library for working with dates and times. It was designed to work both in the browser and in Node.js. Here we have moment code snippet for both server and browser.

List Time Zone In Server(Node.js)

List Time Zone In Browser(JavaScript)

Here, we get the list of time zone name using moment and append into the select box. click here to check the demo of Dynamic Time Zones Dropdown Using Moment.js

Please leave your valuable comments/suggestions/feedback on below comment box if any.

Thank You !!

Siva Sankar

SIVA SANKAR, Working as a Software Engineer, Blogging is my hobby. I completed my Bachelors of Engineering (Computer Science Engineering) in Chennai, India. and my Master of Engineering (Embedded System Technologies) in Tamilnadu, India.

3 thoughts on “List Available Time Zone Using Moment.js

  1. Great piece of code.

    I made the following mods to you example so that I could have a:
    1.) TimeZone offset displayed next to the TimeZone
    2.) A ‘–Select a TimeZone–‘ placeholder in the “select” element.

     

    var timezone = moment.tz.names();
    $(‘select’).append(‘–Select a TimeZone–‘);
    for (var i = 0; i < timezone.length; i++) {
    $('select').append('’ + timezone[i] + ”);
    }
    $(‘select’).selectpicker();

    $(‘select’).change(function () {
    if ($(‘select option:selected’).val() === ‘-1’)
    $(‘#timezone’).val(”);
    else
    $(‘#timezone’).val(moment().tz($(‘select option:selected’).text()).format(‘Z z’));
    });

    1. The previous comment stripped the html:

      <select id=”” class=”selectpicker” data-live-search=”true”></select> <input id=”timezone” readonly style=”border:0px” />

Leave a Reply

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