Wijmo has a globalization module built into its core and exposed as a static Globalize class.
The wijmo.Globalize class has methods for formatting and parsing numbers and dates. These methods are used by all Wijmo controls, and you can use them in your code as well.
The default culture used for formatting and parsing values is American English, but you can switch languages by adding a reference to the appropriate wijmo.culture.*.js file to your pages.
The menu below provides a choice of cultures. Selecting one causes the controller to load the appropriate culture file and refresh the page. This is done to demonstrate that you can switch cultures dynamically, but that is not a common scenario. Most applications would simply include the desired culture with a script tag.
Use the wijmo.Globalize.format method to format dates and values using .NET-style formatting strings that reflect the current culture. The format method automatically chooses the formatDate or formatNumber method, so you need not specify. Here are some examples of formatted values.
Value | Format | Result |
---|---|---|
π | n2 |
{{pi | glbz:'n2'}} |
π * 1000 | n0 |
{{pi * 1000 | glbz:'n0'}} |
π | c |
{{pi | glbz:'c'}} |
-π | c |
{{-pi | glbz:'c'}} |
π | p0 |
{{pi | glbz:'p0'}} |
Today | d |
{{today | glbz:'d'}} |
Today | dddd, MMMM dd, yyyy |
{{today | glbz:'dddd, MMMM dd, yyyy hh:mm:ss tt'}} |
Now | t |
{{today | glbz:'t'}} |
Use the wijmo.Globalize.parseDate, wijmo.Globalize.parseInt, and wijmo.Globalize.parseFloat methods to convert formatted strings into values. The parsing methods are essential if you want to provide two-way bindings or create data-entry controls.
The format and parse methods described above have globalization support built in. But many applications have modules that contain strings which must also be translated. For example, you may have a log-in module that contains status and error messages, menu systems, buttons with text, and so on.
To localize strings in JavaScript, create a single object and use it to store all of the localizable strings in your app. Then use this object in the app instead of string literals.
If you want to allow users to switch cultures dynamically, load the localized strings using Ajax calls. For example, when you switch the culture using the menu at the top of this page, the menu below updates to reflect the selected culture.
This table is another example that uses Ajax calls to load localized strings when the current culture changes.
Path | English | Current Culture ({{culture}}) |
---|---|---|
greetings/hello |
Hello | {{i18n?.greetings?.hello}} |
greetings/bye |
Bye | {{i18n?.greetings?.bye}} |
greetings/cheers |
Cheers | {{i18n?.greetings?.cheers}} |
If you use Wijmo's Globalization module in your controls, you get localization for free. For example, the calendar below shows localized month and day names. This was done using the wijmo.Globalize.format method to format the date parts used to create the calendar.