I need a way to automatically format Date and Number objects based on locale settings of my users.
So far, I've been using toLocaleString()
function for dates. For numbers, toLocaleString()
is also available, but as you can see in the jsFiddle I've prepared, results vary greatly between browsers. With English (United States) locale on my Windows machine, I get this:
- IE9: 15,000.00
- Firefox: 15,000
- Chrome: 15000
In Chrome, it seems like toLocaleString()
does not work at all for numbers. Except this approach, I've also tried:
- To use MicrosoftAjax.js library
localeFormat()
function, but no matter which locale I've set on my PC (by using "Region and Language" dialog), dates and numbers were still both formated in US format. - To use libraries like Globalize. Although they do offer formatting capabilities, they are not able to detect user's locale automatically.
So, to summarize: how to automatically format numbers and dates to respect regional settings of user that browses the webpage in a way that works in all major browsers (IE, Firefox, Chrome)?
I need a way to automatically format Date and Number objects based on locale settings of my users.
So far, I've been using toLocaleString()
function for dates. For numbers, toLocaleString()
is also available, but as you can see in the jsFiddle I've prepared, results vary greatly between browsers. With English (United States) locale on my Windows machine, I get this:
- IE9: 15,000.00
- Firefox: 15,000
- Chrome: 15000
In Chrome, it seems like toLocaleString()
does not work at all for numbers. Except this approach, I've also tried:
- To use MicrosoftAjax.js library
localeFormat()
function, but no matter which locale I've set on my PC (by using "Region and Language" dialog), dates and numbers were still both formated in US format. - To use libraries like Globalize. Although they do offer formatting capabilities, they are not able to detect user's locale automatically.
So, to summarize: how to automatically format numbers and dates to respect regional settings of user that browses the webpage in a way that works in all major browsers (IE, Firefox, Chrome)?
Share Improve this question edited Jan 11, 2014 at 5:28 thefourtheye 240k53 gold badges465 silver badges500 bronze badges asked Jun 26, 2012 at 10:59 Nikola AnusevNikola Anusev 7,0882 gold badges31 silver badges47 bronze badges 2-
On server side you can detect locale from the
Accept-Language
header that browsers send. Using that your server can send javascript depending on the locale. Edit: it seems you can also get it fromnavigator.language
, I don't know how supported that is though if some library wasn't capable of using it. – Esailija Commented Jun 26, 2012 at 11:04 -
Using
Accept-Language
is wrong and pletely useless. For example, my system is set up to use English (because a translated OS is an unusable OS), but I use either Norwegian or ISO date formats (because UK and US date formats are impractical, and I'm not based in the UK or US). I think this is not an edge case, but representative for a wide range of users across the world. – Florian Winter Commented Oct 29, 2019 at 9:44
2 Answers
Reset to default 11.toLocaleString()
functions on native Javascript objects is practically useless because it does not let you specify the locale or otherwise control their behavior.
Until the ECMAScript i18n API bees a reality (which is probably too far in the future to be worth considering at all right now) your only practical option is using libraries such as Globalize, but then as you say you need to detect the user's preferred locale.
Detecting the locale is another problem that is not easily solved with pure Javascript. Specifically, the Accept-Language
header is IMHO practically useless as a means of locale detection because it is not visible to the vast majority of web users. That's why web applications typically provide a custom mechanism for the user to select a locale which is municated back to the server, and the server uses this information to configure each response thereafter.
Today the Internationalization API @Jon mentioned is widely supported.
From a primitive number you can use Number(123456).toLocaleString()
and Chrome now returns "123,456"
as expected (for a US locale). I haven't tested on IE11/Edge but support is there according to caniuse.