I'm just getting started with the Intl package and I don't quite understand how we should use it in our web-application.
E.g. the following snippet uses Intl.DateTimeFormat with different locales (en-GB
, de-DE
) and timezones (Europe/Vienna
and Japan
.
const date = new Date(Date.UTC(2020, 11, 20, 3, 23, 16, 738));
console.log(
new Intl.DateTimeFormat("en-GB", {
timeZone: "Europe/Vienna",
dateStyle: "long",
timeStyle: "long"
}).format(date)
);
// expected output: 20 December 2020 at 04:23:16 CET
console.log(
new Intl.DateTimeFormat("de-DE", {
timeZone: "Japan",
dateStyle: "long",
timeStyle: "long"
}).format(date)
);
// expected output: 20. Dezember 2020 um 12:23:16 GMT+9
This works as expected in my Chrome Desktop browser.
But as I understand the documentation, this depends on the browser implementation:
timeZone
The time zone to use. The only value implementations must recognize is "UTC"; the default is the runtime's default time zone. Implementations may also recognize the time zone names of the IANA time zone database, ...
So how can we make sure that our application works on every browser?
- E.g. When we have a curated list of supported timezones, is there a way to dynamically load these from our server? (or monkey patch, or polyfill, or use a 3rd party library, ..)
note: we do not want to use momentjs, date-fns-tz, etc. - I guess the same is true for locales (i.e. browsers may only support some locales) - I couldn't find info about this in the docs. So also for locales, we'd need a way to dynamically load the locales, that we want to support
Note:
- we don't need to polyfill the Intl package (since we only target modern browsers), we just want to make sure, that the timezones and locales that we want to support are available
- actually I am looking for something like the NodeJs Providing ICU data at runtime - just for the browser