Menu
When coding a website and formatting a date, I want to use the locale that the user has set in their browser.
So for example, if a user has customised their chrome://settings/languages setting in Chrome to something non-default, that's the value I want to use.
However, when I run the code below in the console of such a browser, I get two different values.
[window.navigator.language, new Intl.DateTimeFormat().resolvedOptions().locale]
// Array [ "en-AU", "en-US" ]
navigator.language gives me the expected value, but new Intl.DateTimeFormat().resolvedOptions().locale does not.
MDN for both items seems (to me) to indicate that they should be returning the same value:
returns a string representing the preferred language of the user
To use the browser's default locale, omit this argument or pass undefined.
Should both of these calls be returning the locale the user configured in their browser settings?
802
The Navigator language property is used for returning the browser's language version. It is a read-only property and it returns a string representing the language version of the browser. Some of the possible language codes are : en-US. fr.
The Intl. DateTimeFormat. prototype. resolvedOptions() method returns a new object with properties reflecting the locale and date and time formatting options computed during initialization of this Intl. DateTimeFormat object.
Locale is a set of language- or country-based preferences for a user interface. A program draws its locale settings from the language of the host system. Among other things, locales represent paper format, currency, date format, and numbers according to the protocols in the given region.
In this article, we'll go through three different ways of detecting a user's locale: through the browser's navigator. language s (on the client) object, through the Accept-Language HTTP header (on the server), and through geolocation using the user's IP address (on the server).
I'm using macOS and found that Chrome's navigator.languages reflects the browser language setting while Intl.DateTimeFormat().resolvedOptions().locale reflects the OS language setting. Don't know if this is also the case in other OSs.
138
I also saw this and have done a bit of testing.
On Windows Chrome 85 appears offers two different ways to set the language in it's configuration:
navigator.languages.Intl.DateTimeFormat().resolvedOptions().locale.For example when I have this set:
I get this:
navigator.languages : en-US, en-GB, en
navigator.language : en-US
Intl.DateTimeFormat().resolvedOptions().locale : en-GB
Note that on Mac with Chrome 85 there did not appear to be these two separate settings, but just the ability to set an order of languages (not an option for setting the language to "display the Google Chrome UI").
In Node I found that the value of Intl.DateTimeFormat().resolvedOptions().locale was driven by the language settings of my operating system. Note I only tested this on Windows, but I assume the same is true elsewhere.
I saw that for Intl.DateTimeFormat().resolvedOptions().timeZone both Chrome and Node use the OS setting for the time zone (also only tested on Windows). Chrome does not appear to have its own setting for time zone in its settings so I guess just uses the OS configuration.
25
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
