<p>Recently, I worked on an Interview Scheduler project, and the client would like to have users view the date times in different United States Timezone, and of course, the default timezone should be based on the user's current location.</p><figure class="image"><img src="https://images.unsplash.com/photo-1416960513043-95d3e6da2ce8?crop=entropy&amp;cs=tinysrgb&amp;fit=max&amp;fm=jpg&amp;ixid=MnwxNTQwMTB8MHwxfHNlYXJjaHw3MHx8dGltZSUyMHpvbmV8ZW58MHx8fHwxNjM0ODU5MjI2&amp;ixlib=rb-1.2.1&amp;q=80&amp;w=1080"><figcaption>Photo by <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/@funkloch?utm_source=DNX&amp;utm_medium=referral">Steven Hille</a> on <a target="_blank" rel="noopener noreferrer" href="https://unsplash.com/?utm_source=DNX&amp;utm_medium=referral">Unsplash</a></figcaption></figure><p>JavaScript came with stand built-in function, <code>toLocaleString()</code>, which is very handy, and we don't need to rely on other third-party libraries, like moment.js.&nbsp;</p><h3>Date.prototype.toLocaleString()</h3><p>It takes two parameters, <code>locales</code> and, i.e., <code>toLocaleString(locales, options)</code>, in this case, we can have timezone defined in the options, here is the code snippet:</p><pre><code class="language-javascript" id="MpaxHgtmM">const currentDate = new Date();
const timezone = "US/Eastern" // this has to be IANA Database Name
const currentDTFormatted = currentDate.toLocaleString("en-US", { timeZone: timezone });</code></pre><p>Note: the timezone option has to be a valid <a target="_blank" rel="noopener noreferrer" href="https://www.iana.org/time-zones">IANA</a> (Internet Assigned Numbers Authority) timezone database name. &nbsp;If you like me find IANA database is so hard to use, <a target="_blank" rel="noopener noreferrer" href="https://github.com/deniapps/nextfeathers/blob/master/next/data/iana_tz_list.json">here</a> is the JSON file you can download, that may fit 99.99% of what you need.</p><h3>How to Get Locale &nbsp;IANA Timezone Database Name</h3><p>It's a bit surprising, there is no straightforward method in JavaScript to return the current locale IANA Timezone Database Name, here are some functions, we may use:</p><h4>1. From Intl Object</h4><pre><code class="language-javascript" id="GgA_csFRs">export const getMyIANATZ = () =&gt; {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
};
// This returns "US/New-York" in my location</code></pre><h4>2. getTimezoneOffset()</h4><pre><code class="language-javascript" id="517aXa48e">const currentDate = new Date();
const currentTZOffset = currentDate.getTimezoneOffset();
// this returns 240, which 240 mins / 60 = 4 hours on today (Daytime Savings)</code></pre><p>This is not a reliable method to me, because" Daylight savings" prevent this value from being constant. i.e., If I run this function in Winter, I will get 300 &nbsp;instead of 240 when there is a Daytime Savings.</p><p><strong>3. RegExp</strong></p><p>‘date’ object has a method ‘toString()’ return a string containing Timezone information, so we can use RegExp to extract the timezone info:</p><pre><code class="language-javascript" id="Px3n2CCQe">export const getMyTZ = () =&gt; {
  return new Date().toString().match(/\(([A-Za-z\s].*)\)/)[1];
};</code></pre><p>However, it doesn't return the valid IANA database name. For example, the above code snippet returns “Eastern Daylight Time”.</p><p>Looks like the first solution, using Intl Object, is the best one, but it's not perfect, because it returns a specific location, &nbsp;for example, ‘US/New-York’ instead of ‘US/Eastern’. In my case, I would like the Timezone dropdown to show fewer options. For United States users, the following Timezones should be enough:</p><pre><code class="language-javascript" id="XXnqAxXaT">export const mainUSTZ = () =&gt; {
  return [
    {
      key: "us-pacific",
      text: "Pacific Time - US &amp; Canada",
      value: "US/Pacific",
    },
    {
      key: "us-mountain",
      text: "Mountain Time - US &amp; Canada",
      value: "US/Mountain",
    },
    {
      key: "us-central",
      text: "Central Time - US &amp; Canada",
      value: "US/Central",
    },
    {
      key: "us-eastern",
      text: "Eastern Time - US &amp; Canada",
      value: "US/Eastern",
    },
    {
      key: "us-hawaii",
      text: "Hawaii Time - US",
      value: "US/Hawaii",
    },
    {
      key: "us-alaska",
      text: "Alaska Time - US",
      value: "US/Alaska",
    },
  ];
};</code></pre><p>Just like the Calendly app, it only shows the main US Timezone</p><ol><li>Pacific Time - US &amp; Canada</li><li>Eastern Time - US &amp; Canada</li><li>Center Time - US &amp; Canada</li><li>Mountain Time - US &amp; Canada</li></ol><p>To achieve this UX, I wrote some custom functions:</p><pre><code class="language-javascript" id="hUPV855rR">import usTZs from "../data/usTZGrouped.json";

export const getMyIANATZ = () =&gt; {
  return Intl.DateTimeFormat().resolvedOptions().timeZone;
};

export const getTZGroup = (ianatz = null) =&gt; {
  const localTZ = ianatz ? ianatz : getMyIANATZ();
  // fallback
  let currentTZGroup = "US/Pacific";

  usTZs.forEach((item) =&gt; {
    if (item.name === localTZ) {
      currentTZGroup = item.group;
    }
  });
  return currentTZGroup;
};</code></pre><p>In order to use those functions, the grouped US Timezones data is required, and it's available <a target="_blank" rel="noopener noreferrer" href="https://github.com/deniapps/nextfeathers/blob/master/next/data/usTZGrouped.json">here</a>.</p><p>With those functions, I build a demo page <a target="_blank" rel="noopener noreferrer" href="https://deniapps.com/playground/us-timezone">here</a>.&nbsp;</p><p>Happy coding!</p>

Surprisingly there is not a function to get a top-level US timezone. We can get a valid timezone from Intl object, but it is not a top-level, i.e., US/New-York vs US/Easten. Get a top group of US timezone is usually, for it will simplify the timezone selection dropdown. In this article, I will show how to create custom functions using raw IANA data to achieve this goal.

All Posts In Timezone