0

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:

Quote from the docs:

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?

  1. 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.
  2. 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
TmTron
  • 17,012
  • 10
  • 94
  • 142
  • Locales are different than time zones, but FWIW if you are only targeting modern browsers, you generally don't need to worry about this. They should all be available as long as you don't need to support IE or older mobile devices. (AFAIK) – Matt Johnson-Pint Feb 20 '21 at 18:43
  • I'm not so sure about browsers on mobile phones or tablets. – TmTron Feb 21 '21 at 08:19
  • Have a look at the table here: https://kangax.github.io/compat-table/esintl/ (click the small arrow next to "feature name" at the top to expand all sections, and then scroll over to mobile browsers) – Matt Johnson-Pint Feb 21 '21 at 17:38
  • My understanding of the linked table, is that it just tells us that the Intl-package and functions exist on the listed browsers, But it does not mention which locales (or timezones) are supported, right? AFAIK the issue with locales is that this it is quite large, so browser-builds may only include some or even only one locale. – TmTron Feb 22 '21 at 07:28
  • 1
    If any IANA time zones (eg `Europe/Vienna`) are supported, then generally speaking they should all be. There were some bugs in chromium awhile back that didn't allow some of the aliases (links), but that was resolved. Locales on the other hand (`de-DE`, etc.) could be different, I'm really not sure. – Matt Johnson-Pint Feb 22 '21 at 17:04
  • Thanks for your input. I've created an issue for the [kangax-combat-table](https://github.com/kangax/compat-table/issues/1702), maybe they can make this clearer. – TmTron Feb 22 '21 at 17:23

0 Answers0