Time zones in javascript

Handling timestamps in the past is not an easy thing once you leave UTC. Dates and times are inherently difficult to deal with in any programming language, time zones complicate it further and daylight savings is the icing on the cake.

It seems web browsers have some limited time zone support, i.e. they can adjust to the time zone they think they are in, but cannot do any time zone calculations for other time zones. The only way to adjust time zone then seems to be to adjust the time zone on the OS level. You are then at the mercy of the time zone settings and whatever time zone data is available on the operating system level.

In order to get the browser to handle multiple time zones one can use an extra library and a time zone picker widget. One of the most used time zone javascript libs, moment-timezone, another one is walltime-js.

With walltime.js, you assemble together the time zone data files you need. These come from what is the de facto authoritative source for this kind of sorcery, the Olson files (tz database). You need to have the npm package grunt-cli installed in order to download these time zone info files into walltime.js.

From the page Timezone Picker you can put together a user interface for selecting a time zone

This code snippet can be used together with your own copy of the Timezone picker page, to set a cookie with the selected timezone locale, and to display the value of the cookie in a div.

  <script type="text/javascript">
     function setTZ(value) {
            document.cookie = "TZ="+value+expires+"; path=/";
        }

      function getTZ() {
            var nameEQ = "TZ=";
            var ca = document.cookie.split(';');
            for(var i=0;i < ca.length;i++) {
                var c = ca[i];
                while (c.charAt(0)==' ') c = c.substring(1,c.length);
                if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
            }
            return null;
        }

    function displayTz(timezoneName, countryName, offset){
          setTZ(timezoneName)
          $('.indicatedTimezoneName').text(getTZ()) // Show time zone
    }

    $(document).ready(function() {
      // Set up the picker to update target timezone and country select lists.
      $('#timezone-image').timezonePicker({
        target: '#edit-date-default-timezone',
        countryTarget: '#edit-site-default-country',
        changeHandler: displayTz, // called whenever a time zone is selected in any way
        timezone: 'Europe/Tallin' // default
      });

      // Optionally an auto-detect button to trigger JavaScript geolocation.
      $('#timezone-detect').click(function() {
        $('#timezone-image').timezonePicker('detectLocation');
      });

    });
  </script>

<div class="indicatedTimezoneName">Time zone info goes here</div>