Get the Client's Timezone & Offset in JavaScript
In this tutorial, we'll walk through two effective methods for retrieving the client's IANA timezone and offset using the JavaScript Internationalization API and the getTimezoneOffset()
method.
Get the IANA Timezone
We'll invoke the Intl.DateTimeFormat()
method from the Internationalization API to get the client's timezone:
console.log(Intl.DateTimeFormat().resolvedOptions().timeZone);
// America/Denver
The ECMAScript 2015 update introduced this method, and it currently works in 93.75% of browsers globally.
Get the Timezone Offset
To get the client's timezone offset, we'll use the getTimezoneOffset()
method on a Date
object:
console.log(new Date().getTimezoneOffset());
// 420
One thing to note is not all timezones are returned in whole hours. Because of this, the timezone offset returns in minutes instead of hours. To convert the offset into hours, we can perform a simple calculation by dividing the client's timezone in minutes by 60, the number of minutes in an hour:
console.log(new Date().getTimezoneOffset() / 60);
// 7
Another thing to note is although UTC is represented as a negative value in the western hemisphere and a positive value in the eastern hemisphere, this is the opposite when returning the timezone offset in minutes. For example, the America/New York timezone is UTC -5 but returns as 300 in JavaScript.
Conclusion
That covers returning the timezone and offset in JavaScript. At some point, it would be great to combine these features into a single API or function call. For now, this works perfectly!
Created: February 04, 2023
Comments
There are no comments yet. Start the conversation!