7

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)?

thefourtheye
  • 233,700
  • 52
  • 457
  • 497
Nikola Anusev
  • 6,940
  • 1
  • 30
  • 46
  • On server side you can detect locale from the [`Accept-Language` header](http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html#sec14.4) that browsers send. Using that your server can send javascript depending on the locale. Edit: it seems you can also get it from `navigator.language`, I don't know how supported that is though if some library wasn't capable of using it. – Esailija Jun 26 '12 at 11:04
  • Using `Accept-Language` is wrong and completely 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 Oct 29 '19 at 09:44

2 Answers2

10

.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 becomes 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 communicated back to the server, and the server uses this information to configure each response thereafter.

Community
  • 1
  • 1
Jon
  • 428,835
  • 81
  • 738
  • 806
  • Thanks for the exhaustive answer. I'll probably just let the user to select the locale he prefers and won't try anything fancy. – Nikola Anusev Jun 26 '12 at 19:49
2

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.

Greg
  • 3,370
  • 3
  • 18
  • 20
  • 1
    Sorry but this is still broken, IMO. I have system set as en-US, but a date format of yyyy-MM-dd but toLocaleDateString() still outputs MM/dd/YYYY – Rahly Dec 15 '17 at 15:14
  • Still broken in 2019 (in Firefox and Chrome on Windows) – Florian Winter Oct 29 '19 at 09:42
  • @Rahly IMO it only takes the locale into account, so it does what it says it does. The fact you've overwritten a specific locale setting on your system is not supposed to be covered in this API. – Greg Oct 31 '19 at 04:13
  • @Greg Thats the point of Locale. Defined as, "In computing, a locale is a set of parameters that defines the user's language, region and any special variant preferences that the user wants to see in their user interface." System overrides should be taken into account. – Rahly May 24 '20 at 00:21
  • @Rahly I should have said : it depends on the supported granularity of the locale settings. – Greg May 25 '20 at 02:16
  • @Greg if i can't get the format the user wants to see, then that's a failure of the implemented locale, if the system is not accepted then the browser should allow me to change it. – Rahly Jun 15 '20 at 07:19