I am currently working on a web application and I try to make the website multilingual.
From The user I got the following things:
language - from $_SERVER['HTTP_ACCEPT_LANGUAGE']
country - from the useres IP address (with an API)
Now, the website takes the language and shows the page in the correct language - for example english or german. Now I want to format numbers and dates and I dont know what should I use to format a date for example:
Germany: dd.MM.yyyy
United States: MM/dd/yyyy
But what should I use to format the date? The language or the country?
What if a user is in the US but speaks german? Should I use the US or the german format?
Would be nice to hear your opinion about that and how you handle localization.
The questions you are asking are solved using Locales. A locale is specific to a language, and then possibly more specific with geographical information and script variants.
CLDR is a repository of information relating to locales. You can find the names of specific cities in any languages, for example, or see how they format dates in a specific area.
You can leverage this data in conjunction with the Globalize.js library and its date formatting module.
See this answer for a general overview of how to use Globalize.js.
Related
My app is translated in several languages with i18next. Until now, I used only one English translation. But I'd like to have both en-GB and en-US. Truth is, text translations will be the same and the only reason I want both languages is for date formats.
More precisely, I want to pass the good date format to a MUI DatePicker component. Right now, English has MM-DD-YYYY format, unlike most other languages. Obviously, I'd like en-GB to have DD-MM-YYYY format.
Is this rather common use case built in i18next or should I use some kind of hack to avoid having two almost identical translation files to maintain ?
I’m trying to format some numbers with jQuery. I would like to get the user’s regional settings for currency and number, in order to implement the correct format (obtain the decimal separator).
Is it possible to retrieve these parameters with jQuery or JavaScript?
Use Number.toLocaleString() with style:'currency':
(73.57).toLocaleString('de-DE',{style:'currency',currency:'EUR'}); // German: 73,57 €
(73.57).toLocaleString('en-US',{style:'currency',currency:'EUR'}); // American: €73.57
Note that:
This does not get regional settings, but provides output in regional settings.
If you want your locale to be determined dynamically, use navigator.language.
There are many other means aside from this native approach; for starters, take a look at accounting.js or Stack Overflow answers like this one.
As Daniel Jackson commented:
Using Intl.NumberFormat.format(), you can achieve identical results, with the NumberFormat and the general Intl objects offering versatile options and methods with a main focus on language sensitivity.
new Intl.NumberFormat('de-DE',{style:'currency',currency:'EUR'}).format(73.57); // DE: 73,57 €
new Intl.NumberFormat('en-US',{style:'currency',currency:'EUR'}).format(73.57); // US: €73.57
There is a jQuery plugin for it - https://github.com/dansingerman/jQuery-Browser-Language
See this SO answer for more info JavaScript for detecting browser language preference
I should preface this post by saying that I am a very elementary developer with a generic IS degree. Without going into too much detail, I was given a moderately large web application from an interning software engineer to support an enhance if need be. It was written primarily in Python, JavaScript and HTML5 and utilizes a Google Map API to visually represent the location and uses of given inputs. This leads me to my question.
There is a date picker modal that the application/user utilizes. They pick a START and END date, in the default format YYYY-MM-DD (if the user does not use that exact format (i.e. 2015-09-29) the date picker will not work), and the application then goes to the DB and picks the given inputs between those dates and represents them on the map. I have been told that, for usability, I have to make the program accept multiple date formats (i.e. September 29 2015, 09-29-2015, 9-29-2015, 9/29/2015). How would I go about doing this?
You can use Javascript to give the user the feedback that the correct format(s) is being used. But if you are taking any data to your server be sure verify the data on the server.
To verify the correct dataformat you can use Regular expressions and check if any format is correct. You should iterate through all allowed possibilities until one is found correct.
Your best bet from the user-experience standpoint is not to try and parse multiple formats but to normalize the input being accepted.
For dates, wouldn't you rather use a calendar picker instead of manually typing in the dates?
Have a look at this jQuery solution, or you can Google, there are plenty that don't use jQuery, and you can usuaslly specify the outupt format so you get the format you require.
Here's an example doing what you want: http://jsfiddle.net/ezygkgxt/
HTML
<label>Date: <input name='date' /></label>
<input type='hidden' id='actualDate' />
JS
$("input[name='date']").datepicker({
altFormat: "yy-mm-dd",
altField: "#actualDate"
});
$("input[name='date']").change(function(){
window.alert("The current chosen date is: "+$("#actualDate").val());
});
It sounds like this question has been asked a few times before, but I am not seeing a solution. So here goes the question!
I am using the date filter in an HTML page of an AngularJS application to display dates in a page as follows:
{{item.dateCreated | date:'mediumDate'}}
I have a menu item on my page that allows the user to select the language to be used to display the page. I am using the excellent ngTranslate module to perform the translation of the strings on the page, but it does not handle the date display above.
The AngularJS docs indicate that there is a $locale service with one member called id - not sure if this is a property to view the locale or a method to set it. The docs also say that I need to include the i18n script file appropriate for the locale in the page after the angularjs library has been included, but of course I don't know the locale until runtime when the user selects it.
So the question is, how can I support multiple locales in an angularjs application such that filters such as date translate and format dates for the locale, and how do I tell angularjs what locale to use if the user changes it at runtime? I suppose I could build a set of format strings by hand and apply them to the date filter as the user selects a language, but that might get difficult as we decide to support more and more languages??
I would really appreciate any expert suggestions!
To change the locale dynamically you could test the package Angular Dynamic Locale.
I understood the javascript method toLocaleDateString() used computer settings.
Let's take the W3Schools example :
when i change date and hour formats of my computer, the result is different in Firefox or IE (as expected), but Chrome still shows the same date format, why?
From the MDN:
"The exact format depends on the platform, locale and user's settings."
And,
"You shouldn't use this method in contexts where you rely on a particular format or locale."
Basically, "Why" is because that's how Chrome does it. If you need a specific format, you're going to have to specify it yourself.
From the EMCAScript 5 standard:
15.9.5.6 Date.prototype.toLocaleDateString ( )
This function returns a String value. The contents of the String are implementation-dependent, but are intended to represent the “date” portion of the Date in the current time zone in a convenient, human-readable form that corresponds to the conventions of the host environment’s current locale.
Chrome can represent the date as a locale date string in whatever manner it likes. The standard only supplies guidelines; it does not mandate a particular format. And, in fact, the result will vary not only between browsers but also within Chrome itself depending on your locale settings.
It looks like Chrome does not use the Windows regional settings, but its own settings instead. These are available via Settings > Advanced Settings > Language. However the date format is not explicitly defined, it is inferred from the language + country choice, for instance:
English (US) sets date format to mm/dd/yyyy
English (UK) sets date format to dd/mm/yyyy
(For anyone trying to change these, don't forget - like I did - to restart Chrome for the settings to take effect)
Back to the original question, it looks like it was legit to use toLocaleDateString() as long as the idea is to present the information in a format the human user understands. But this would be an ideal world, where every user has his/her browser properly configured. Instead, Chrome is set by default to English(US) as long as people leave it be in English, and it takes some googling (which most users won't do) to change these settings.
This makes it risky to use toLocaleDateString() even when not "relying on a particular format or locale". It looks like the only "serious" option for any cross-browser web application is to manage its own date format preferences (per user, of course...)