Browser default locale - Intl.DateTimeFormat vs navigator.language

Question

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:

• NavigatorLanguage.language

  returns a string representing the preferred language of the user

• Intl.DateTimeFormat locale parameter

  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?

Episiotomy

Answer 1

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.

Rend

My MacBook is language en-US, but my region is set to de and my time formatting is German as well, yet Intl.DateTimeFormat().resolvedOptions().locale will return en-US when it should return en-DE, actually. – Disassemble

Is en-DE a locale? – Radian

Answer 2

I also saw this and have done a bit of testing.

Chrome

On Windows Chrome 85 appears offers two different ways to set the language in it's configuration:

1. A list of languages in order of preference. This appears to drive navigator.languages.
2. A language which is used to "display the Google Chrome UI". This appears to drive 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").

Node

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.

Side note on time zone

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.

Typesetting

Thanks for looking into this, but unfortunately it doesn't seem to be working that way for me (on Windows). The first language in my Chrome Languages list is also listed as "This language is used to display the Google Chrome UI", but it's my 2nd language that is returned by Intl.DateTimeFormat().resolvedOptions().locale. – Episiotomy

Hmm interesting, in that case I'm not sure, I only tried some local testing and am not sure how it works under the hood. – Typesetting