Changing Timezone across the application

Question

I’m currently working on Timezone related options across my application. I want to change the user’s default timezone which the browser picks during

let date = new Date()

the function returns the date and time with respect to browser zone.
Is there any setting which I can edit such that across the application, different zone is used?

Using moment-timezone, I can work on this dynamically. But I am using few packages that are using Javascript Dates.

Therefore, is there a setting or a parameter through which we can change the zone of the browser and whenever the new Date() function is called, the time fetched is in that timezone?

Answer 1

A Date object does not actually store a time zone. It simply stores the number of milliseconds since since Jan 1, 1970 00:00 UTC, otherwise known as the "UNIX Epoch".

The methods of Date give the illusion of having a stored time zone because, when you call a method like getHours(), the system reports the time in minutes in the time zone of the user.

But what's happening under the hood is something like this:

// Stores the number of milliseconds since 1970-01-01T00:00:00 UTC. 
// Does NOT store the current time zone.
const date = new Date();

// This returns the number stored above
const msecsSinceEpoch = date.getTime();

// This returns the current UTC offset of the user's time zone.
// For example, if the user's OS settings use the time zone in 
// California in December 2022, then this method will return 480.
// If you subtract that number of minutes from the current UTC time,
// then it will equal the local time in California in December 2022.
const offsetMinutes = date.getTimezoneOffset();

// When you call methods like .hours(), the browser uses the two
// values above to calculate the result. Like this:
const MSECS_PER_MINUTE = 60*1000;
const MSECS_PER_HOUR = MSECS_PER_MINUTE * 60;
const offsetMsecs = offsetMinutes * MSECS_PER_MINUTE;
const totalHours = Math.trunc ((msecsSinceEpoch - offsetMsecs) / MSECS_PER_HOUR);
const hours = totalHours % 24;

// The code above will return the same result as this:
const hours2 = date.getHours();

The code above should make it clear why you cannot change the time zone of a Date object: because the Date object doesn't store a time zone at all! There's no time zone to change. And, for security reasons, code running in the browser can't change the user's OS settings to change the time zone.

So your first idea (to change the time zone of Date) won't work. But many web apps allow viewing date and time information in different time zones.

Soon (likely sometime in 2023) JavaScript will be adding a new built-in object called Temporal that will make it easier to work with time zones. In the meantime, it's straightforward to use different time zones using libraries like moment-timezone, or you can use one of the Temporal polyfills.

But that won't help you in the specific case you're asking about: how can you change the time zone of a library that only accepts a Date parameter. Some libraries provide a way to change the time zone of data displayed. Others do not, and those that don't provide a way to change the time zone come in two types:

1. Libraries that don't care about time zone at all. For example, a library that schedules a reminder text message in 60 minutes doesn't care about the time zone. It only cares about the exact time: the value stored in a Date and returned by .getTime(). If your library is like this, then you should be fine passing a Date and don't need to worry about time zones.

2. Libraries that show data to users in a specific time zone. For example, a date picker or a calendar. These libraries typically use the time zone in the user's OS settings. However, many libraries provide a way to override that time zone. You'll need to check your libraries' documentation or search questions about how to set the time zone for the output of those libraries. Or you can switch libraries!