I'm having quite a bizarre issue with Intl.DateTimeFormat. To start off with, the documentation for this over on MDN says that providing the string 'default' as the first argument of the constructor (instead of a specific language code) will have it use the browser's default locale:

// to specify options but use the browser's default locale, use 'default'
console.log(new Intl.DateTimeFormat('default', options).format(date));

So far, so good. Doing console.log(navigator.languages) in Chrome yields the following:

['en-US', 'en', 'bs', 'hr', 'sr']

MDN says these are in order of preference, with the preferred language being first. Therefore one would assume it would treat 'en-US' as my default locale. However, this does not seem to be the case. If I make two of these formatters like so:

const defaultTimeFormatter = new Intl.DateTimeFormat('default');
const enUsTimeFormatter = new Intl.DateTimeFormat('en-US');

and then call their format methods, I get the following outputs:

defaultTimeFormatter.format(new Date()); // 20/07/2022
enUsTimeFormatter.format(new Date()); // 7/20/2022

defaultTimeFormatter is giving me the date format that is actually used in my country but that is not the locale setting of the browser. Clearly it's getting this 'default' value elsewhere but I've found no way to actually access that value because all the documentation says that navigator.language is the way to do it.

This has all been in Chrome on a Mac. In Chrome on Windows 11, defaultTimeFormatter and enUsTimeFormatter give the same result, as they do in Firefox on either platform as well.

I'm stumped as to how Chrome on Mac decides this 'default' locale. Could it be pulling something from the OS level? But then why wouldn't Chrome on Windows behave the same? Any help would be much appreciated.