211

Is there a reliable way to get a timezone from client browser? I saw the following links but I want a more robust solution.

Auto detect a time zone with JavaScript

Timezone detection in JavaScript

2
  • onlineaspect.com/2007/06/08/…
    – Lenar Hoyt
    Aug 4, 2011 at 10:21
  • 8
    I wrote jsTimezoneDetect that you link to above, and my take on the situation is that it is as close as you can get with pure cross browser javascript (without geolocation and IP lookups). Aug 11, 2011 at 9:16

8 Answers 8

399

Half a decade later we have a built-in way for it! For modern browsers I would use:

const tz = Intl.DateTimeFormat().resolvedOptions().timeZone;
console.log(tz);

This returns a IANA timezone string, but not the offset. Learn more at the MDN reference.

Compatibility table - as of March 2019, works for 90% of the browsers in use globally. Doesn't work on Internet Explorer.

8
  • 3
    Firefox and IE seems to not support the property :( developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
    – Wallace
    Sep 7, 2016 at 17:58
  • 9
    Intl.DateTimeFormat().resolvedOptions().timeZone will return the expected value starting from Firefox 52: kangax.github.io/compat-table/esintl/…
    – julen
    Mar 3, 2017 at 12:45
  • How does one use this is a form? In a hidden value as suggested upon developer.mozilla.org/en-US/docs/Web/HTML/Element/input/… ?
    – hendry
    Mar 25, 2019 at 7:24
  • 9
    Works in Firefox now May 29, 2019 at 22:54
  • 2
    I believe not providing the offset is the best policy for long-range planning. If the client is expected to provide the offset, they are also expected to be up-to-date with the IANA timezone database not only for the set of the timezone strings available at that time, but also the offsets for those timezone strings at that point in time. Best to depend on server-side code to resolve timezone string to offset correctly based on tzdata for the point in time when the request occurs, rather than depending on browsers' up-to-dateness. Apr 2, 2020 at 16:50
92

Often when people are looking for "timezones", what will suffice is just "UTC offset". e.g., their server is in UTC+5 and they want to know that their client is running in UTC-8.


In plain old javascript (new Date()).getTimezoneOffset()/60 will return the current number of hours offset from UTC.

It's worth noting a possible "gotcha" in the sign of the getTimezoneOffset() return value (from MDN docs):

The time-zone offset is the difference, in minutes, between UTC and local time. Note that this means that the offset is positive if the local timezone is behind UTC and negative if it is ahead. For example, for time zone UTC+10:00 (Australian Eastern Standard Time, Vladivostok Time, Chamorro Standard Time), -600 will be returned.


However, I recommend you use the day.js for time/date related Javascript code. In which case you can get an ISO 8601 formatted UTC offset by running:

> dayjs().format("Z")
"-08:00"

It probably bears mentioning that the client can easily falsify this information.

(Note: this answer originally recommended https://momentjs.com/, but dayjs is a more modern, smaller alternative.)

18
  • 42
    It may be worth noting that offset and time zone are not necessarily the same thing.
    – Dex
    Aug 2, 2015 at 4:45
  • 9
    How would you apply DST with only the offset? In those area the offset is wrong half the year. IMO the timezone is more accurate.
    – Savageman
    Aug 20, 2015 at 9:54
  • 7
    DST is part of the offset at any given time. Central European Time in winter is UTC+01:00. However, when DST is applied CET is UTC+02:00, like it is now in Denmark where I am. Sep 7, 2015 at 13:31
  • 2
    offset is not accurate when considering Daylight Saving.
    – Greg L.
    Jun 6, 2019 at 12:55
  • 2
    I would change the first sentence to say: "Often, when people think offset is enough, what they actually need is a timezone. The former completely ignores daylight saving, while the latter does not."
    – Flimm
    Dec 3, 2019 at 16:28
89

Look at this repository pageloom it is helpful

download jstz.min.js and add a function to your html page

<script language="javascript">
    function getTimezoneName() {
        timezone = jstz.determine()
        return timezone.name();
    }
</script>

and call this function from your display tag

1
  • 27
    TL;DR We now can use Intl.DateTimeFormat().resolvedOptions().timeZone (no IE11) as suggested by Wallace.
    – Code4R7
    Jul 12, 2018 at 17:48
65

For now, the best bet is probably jstz as suggested in mbayloon's answer.

For completeness, it should be mentioned that there is a standard on it's way: Intl. You can see this in Chrome already:

> Intl.DateTimeFormat().resolvedOptions().timeZone
"America/Los_Angeles"

(This doesn't actually follow the standard, which is one more reason to stick with the library)

3
  • 1
    Intl looks stable in everything but Safari. caniuse.com/#feat=internationalization Mar 23, 2015 at 9:17
  • 2
    @MichaelCole Conformant implementations of Intl are supposed to return undefined for the timeZone property if you didn't manually specify a timezone in constructing the DateTimeFormat. Chrome deviates from the standard by returning the system's timezone instead; that's what Johannes's answer exploits, but also why he said "doesn't actually follow the standard". Nov 20, 2015 at 2:09
  • 23
    FYI - the standard is now Intl.DateTimeFormat().resolvedOptions().timeZone
    – Nederby
    Jan 10, 2017 at 15:01
7

you could use moment-timezone to guess the timezone:

> moment.tz.guess()
"America/Asuncion"
1
4

Here is a jsfiddle

It provides the abbreviation of the current user timezone.

Here is the code sample

var tz = jstz.determine();
console.log(tz.name());
console.log(moment.tz.zone(tz.name()).abbr(new Date().getTime()));
2
  • 1
    To display date as May 22 2015 03:45 PM CDT I used console.log(moment(now).format('MMM DD YYYY hh:mm A') + ' ' + moment.tz.zone(tz.name()).abbr(now.getTime()));
    – αƞjiβ
    May 22, 2015 at 20:47
  • 5
    Your fiddle is not working anymore and is giving errors in the console.
    – Saumil
    Nov 10, 2016 at 18:21
3

I used an approach similar to the one taken by Josh Fraser, which determines the browser time offset from UTC and whether it recognizes DST or not (but somewhat simplified from his code):

var ClientTZ = {
    UTCoffset:  0,          // Browser time offset from UTC in minutes
    UTCoffsetT: '+0000S',   // Browser time offset from UTC in '±hhmmD' form
    hasDST:     false,      // Browser time observes DST

    // Determine browser's timezone and DST
    getBrowserTZ: function () {
        var self = ClientTZ;

        // Determine UTC time offset
        var now = new Date();
        var date1 = new Date(now.getFullYear(), 1-1, 1, 0, 0, 0, 0);    // Jan
        var diff1 = -date1.getTimezoneOffset();
        self.UTCoffset = diff1;

        // Determine DST use
        var date2 = new Date(now.getFullYear(), 6-1, 1, 0, 0, 0, 0);    // Jun
        var diff2 = -date2.getTimezoneOffset();
        if (diff1 != diff2) {
            self.hasDST = true;
            if (diff1 - diff2 >= 0)
                self.UTCoffset = diff2;     // East of GMT
        }

        // Convert UTC offset to ±hhmmD form
        diff2 = (diff1 < 0 ? -diff1 : diff1) / 60;
        var hr = Math.floor(diff2);
        var min = diff2 - hr;
        diff2 = hr * 100 + min * 60;
        self.UTCoffsetT = (diff1 < 0 ? '-' : '+') + (hr < 10 ? '0' : '') + diff2.toString() + (self.hasDST ? 'D' : 'S');

        return self.UTCoffset;
    }
};

// Onload
ClientTZ.getBrowserTZ();

Upon loading, the ClientTZ.getBrowserTZ() function is executed, which sets:

  • ClientTZ.UTCoffset to the browser time offset from UTC in minutes (e.g., CST is −360 minutes, which is −6.0 hours from UTC);
  • ClientTZ.UTCoffsetT to the offset in the form '±hhmmD' (e.g., '-0600D'), where the suffix is D for DST and S for standard (non-DST);
  • ClientTZ.hasDST (to true or false).

The ClientTZ.UTCoffset is provided in minutes instead of hours, because some timezones have fractional hourly offsets (e.g., +0415).

The intent behind ClientTZ.UTCoffsetT is to use it as a key into a table of timezones (not provided here), such as for a drop-down <select> list.

2
  • Looks like it will always return 'D' if daylight savings is observed. And why only five months difference? Surely, Jan and July will work more reliably?
    – Matt
    Apr 2, 2019 at 21:18
  • @Matt - Yes, you could use 7-1 for July instead of June. I'm not sure if it really makes any difference, since I doubt there are regional DST schemes that do not include June. Apr 2, 2019 at 23:21
-25

No. There is no single reliable way and there will never be. Did you really think you could trust the client?

6
  • 25
    To clarify: The client's clock may not be set correctly, or they may be maliciously trying to fool you into thinking they're in a different time zone from actual. If you're going to use the client's time zone, don't do it for anything important.
    – Ryan Kinal
    Nov 12, 2012 at 13:54
  • 10
    -1 for giving a potentially misleading answer and not clarifying.
    – Doug S
    May 14, 2014 at 21:36
  • 8
    Yes, for my application I can trust the client. If the client has been mis-configured or has a bug, that's on my users. Mar 23, 2015 at 9:15
  • 3
    I actually agree with Florian. Reliable method? Kind of. Reliable data? Definately not.
    – Rob
    Nov 1, 2016 at 11:30
  • 5
    The question does not says how the data will be used. For example it doesn't says that the detected timezone will ever be submitted to a server. So the remark about trust is irrelevant if the data is used purely locally.
    – dolmen
    Apr 30, 2019 at 12:38

Not the answer you're looking for? Browse other questions tagged or ask your own question.