How to get the timezone string of the browser in Javascript?

Question

I want to display on my webpapge the full-name of the user's Timezone. For example:

Eastern Standard Time (North America)
Pacific Daylight Time (North America)
West Africa Time

How can I do this in Javascript? I have seen solutions that render something like this: America/New_York. But that's not really what I'm looking for.

Solution 1

You appear to be asking for a human-readable description of the user's current time zone, in the user's current language, at the current point in time.

In most modern browsers and other environments that fully support the ECMAScript Internationalization API this is best extracted as follows:

// Get a specific point in time (here, the current date/time):
const d = new Date();

// Get a DateTimeFormat object for the user's current culture (via undefined)
// Ask specifically for the long-form of the time zone name in the options
const dtf = Intl.DateTimeFormat(undefined, {timeZoneName: 'long'});

// Format the date to parts, and pull out the value of the time zone name
const result = dtf.formatToParts(d).find((part) => part.type == 'timeZoneName').value;

For example, in my Chrome 79 browser on Windows in winter, it returns "Pacific Standard Time". The same code in summer will return "Pacific Daylight Time". If you want to reflect the description of the time zone that is in effect at a particular time of the year, then create the Date object at that particular time.

In older environments that don't support the Intl API, you can try extracting part of the time zone name from the Date.toString output like this:

var s = new Date().toString().match(/\((.*)\)/).pop();

This only works because the output of the toString function on the Date object is left up to the implementation to define, and many implementations happen to supply the time zone in parenthesis, like this:

Sun Feb 21 2016 22:11:00 GMT-0800 (Pacific Standard Time)

If you were looking for a generic name, such as simply "Pacific Time" - sorry, that's not available.

Solution 2

One liner:

new window.Intl.DateTimeFormat().resolvedOptions().timeZone

Comments

[Saqib Ali]

Unfortunately this answer doesn't really tell me what I need to do to solve my question. I already looked at those libraries. I don't see any clear explanation there how to get the strings I'm looking for.

[Deepak]

@SaqibAli check now this should do for you.

[Matt Johnson-Pint]

jsTimeZoneDetect can guess a zone id like America/New_York, and now moment-timezone can do that too. But the OP specifically said that's not what he's looking for.

[Saqib Ali]

Interesting. When I do new Date().toString() I get Mon Feb 22 2016 01:25:11 GMT-0500 (EST). I'm using Chrome 48 on Mac OSX Yosemite. I could write a function that takes the most common time string formats, pulls out the strings from there and displays those, right? It wouldn't be 100%. But I could probably cover most cases.

[Matt Johnson-Pint]

Good luck with that. The sheer number of edge cases will be very difficult to deal with. Consider also that the data changes over time, and varies per language. Do you know Chinese, Russian, and Arabic? :) My point is - there's no consistent and reliable solution. Your example proves that well.

[Matt Johnson-Pint]

If you care to share more details about your use case (including purpose and what platform you're running on the back-end), I may be able to suggest an alternative approach.

[Saqib Ali]

Matt. I'm building an application in which the user has to set a deadline by picking a date from a date-picker. If they pick February 25th, the date/time Feb 25th, 2016 00:00 will be converted to UTC and sent to the back-end database. This date will be shown to other users in their localized time. So if someone in Washington DC selects Jun 1, 2016. A user in Los Angeles will see that they picked May 31, 21:00. When the user selects the date, I want them to understand well that they are selecting it in their own timezone. Thus my original question. What's the best way to accomplish this?

[Matt Johnson-Pint]

You could just say "in your local time zone". Sometimes the simplest solutions are best. Or just regurgitate their input back through a Date object and show the toString result in text, whatever it may happen to be.

[ChaseMoskal]

thought this might help a googler like me: when working with input[type=date] or input[type=time], those inputs are treated as UTC inputs. if instead, you want the user to input LOCAL time, then you'll need to compensate for the user's timezone. this can be done like this: new Date(input.valueAsNumber + ((new Date()).getTimezoneOffset() * 60000)) -- it is ugly, but necessary 👋😎

[Matt Johnson-Pint]

@ChaseMoskal - No. That picks a different moment in time and potentially uses the wrong offset. I believe this was answered in your question here.

[Matt Johnson-Pint]

FYI - I updated this answer to reflect the modern approach using Intl.

[Aidin]

1) IANA name and the detailed local names are different. 2)Your solution doesn't work in IE11 -- stackoverflow.com/a/44935836