How to pass in dynamic value into toLocaleTimeString

Question

So I'd like to pass in a dynamic value into toLocaleTimeString. The way the time is formatted is going to change based on the user location. For example time for a user in the UK should be something like 18:00:00, while for someone in America it would be 6:00:00 PM.

The only problem I'm having is doing a dynamic mapping of timezone to which locale to pass in (i.e. "en-GB", "en-US", etc). How do I do this?

I'm using momenttimezone and tzlookup to get the user timezone:

let timezone = tzlookup(userLatitude, userLongitude)

var date = new Date()
var localHour = date.toLocaleTimeString("xx-XX") // How do I dynamically set xx-XX to what it's supposed to be based on the user location?

Any help is much appreciated!

If you use no parameters it should use the timezone and locale from the browser or system. You shouldn't assume someone's language based on their coordinates. — James, May 04 '22 at 12:17
@James These times are related to shop open/close times. It's all stored on the backend. At the point I'm at, I don't want to store UTC on the backend and then convert, I'd rather just have the open/close times of shops stored the way they would display on the outside of the shop. I was wondering if there's some kind of mapping from timezone to locale in javascript/NodeJ. — nickcoding2, May 04 '22 at 12:26
what about to use this package: [moment-timezone](https://momentjs.com/timezone) — Ali Shefaee, May 04 '22 at 13:20

score 1 · Answer 1 · answered May 04 '22 at 14:27

Time zones and locales are two orthogonal concepts. You should not make any assumptions that bind them together. In many cases, they can be quite different. For example, if I am an English speaking American visiting Japan, my device will likely have a time zone of Asia/Tokyo and a locale of en-US.

As for toLocaleTimeString (and toLocaleDateString, toLocaleString, Intl.DateTimeFormat, etc.) the default value of undefined will automatically use the user's current locale.

In other words:

// this uses the current locale and current time zone
date.toLocaleString()

// this uses a specific locale and current time zone
date.toLocaleString('en-US')

// this uses the current locale and a specific time zone
date.toLocaleString(undefined, {timeZone: 'Asia/Tokyo'})

// this uses a specific locale and a specific time zone
date.toLocaleString('en-US', {timeZone: 'Asia/Tokyo'})

In your example, if you want to display a time in the UK time zone (the mainland, not a dependency or overseas territory), then you can use the time zone Europe/London. Your call to tzlookup should be returning that. You should not choose a locale. Let the user's browser set that according to their preferences.

const timezone = tzlookup(userLatitude, userLongitude)

const date = new Date()
const localHour = date.toLocaleTimeString(undefined, {timeZone: timezone})

You should not need moment or moment-timezone for this operation.

How to pass in dynamic value into toLocaleTimeString

1 Answers1