get client time zone from browser

JavascriptHttpBrowserTimezone

Javascript Problem Overview


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

Javascript Solutions


Solution 1 - Javascript

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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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.)

Solution 4 - Javascript

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)

Solution 5 - Javascript

you could use moment-timezone to guess the timezone:

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

Solution 6 - Javascript

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()));

Solution 7 - Javascript

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.

Solution 8 - Javascript

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionconfuciusView Question on Stackoverflow
Solution 1 - JavascriptWallaceView Answer on Stackoverflow
Solution 2 - JavascriptGeorgian CitizenView Answer on Stackoverflow
Solution 3 - JavascriptChris W.View Answer on Stackoverflow
Solution 4 - JavascriptJohannes HoffView Answer on Stackoverflow
Solution 5 - JavascriptTomas TomecekView Answer on Stackoverflow
Solution 6 - JavascriptPushkar NewaskarView Answer on Stackoverflow
Solution 7 - JavascriptDavid R TribbleView Answer on Stackoverflow
Solution 8 - JavascriptFlorian MargaineView Answer on Stackoverflow