How to format and parse numbers based on user language using jQuery

In previous post MVC Custom model binder to parse custom text formats I discussed implementation of a custom model binder to solve the problem of globalized numbers in text boxes and how to make sure that your model parses those numbers correctly. In this post, I will discuss how to use jQuery to format numbers, currency etc. values depending on language settings. Yes, that's right. You can use a jQuery library that deals with globalization. It is jquery-globalize. This library provides some handy features that allow you render texts in different language formats. The following screen shots demonstrate two views of same data entry form based on language selection.

From the screen shot above you can the effect of changing culture from en-US (English USA) to fr-FR (French). In USA culture comma is thousand separator where as in french (euro) comma is decimal point. Therefore when culture selection is changed from US to French, the numbers changed from 2000 to 2 because the numbers were being parsed to integers with no decimal places.

How to use jquery-globalize

It is very straight forward to use jquery-globalize library.

• Download the required JavaScript files from here.
• Include globalize.js in your page. This is file irrespective of what language you want to support.
• Now include language specific globalization JavaScript files. For example in my prototype implementation, I have included globalize.culture.es-ES.js, globalize.culture.hi-IN.js,globalize.culture.fr-FR.js, globalize.culture.en-GB.js files to support Spanish, Indian, French and English (Britain) number formats. As best practice, you will stream these language specific files at run time. Otherwise your page will become very slow at load if all language specific files will have to be included.

Now your client side is all set to use globalization. Following code shows how globalization library has been used to format and parse the numbers in my demo application.

var siteCulture = "en-US";

function updateBidAmountValues() {
    var total = 0;
    var selector = Globalize.culture(siteCulture);
    $(':input[data-type="bidamount"]').each(function (index, item) {
        var parsedValue = Globalize.parseInt($(this).val());
        $(this).val(Globalize.format(parsedValue, "n0"));
        total += parsedValue;
    });
    
    $('span[type="bid_currency"]').each(function (index, item) {
        $(this).text(selector.numberFormat.currency.symbol);
    });
    
    $('#biditem_total').text(Globalize.format(total, "n0", selector));
    $('#biditem_total_currency').text(Globalize.format(total, "c0", selector));
}

$('#culures_select').bind('change', function (event) {
   siteCulture = $("#culures_select").val();
   updateBidAmountValues();
});
    

The important parts of the code have been highlighted. Default language for Globalize object is set to en-US. If you want to set a language other than English (USA) you will need to call culture method on Globalize object and pass it language code. For example if I want to set the language to French, then I will call this method as shown below.

Globalize.culture("fr-FR");
    

In the demo implementation, this value is being set from dropdown selection. If you want to parse a text string to Number object, then you will call appropriate method like parseInt, parseFloat etc. with appropriate pattern and number of decimals required. If you want to format a Number to culture specific text then you will call format method. You can see from the sample implementation, each of these methods is passed selected culture along with formatting pattern.

Demo and prototype

You can view live demo by visiting following URL.

JQuery Globalization Demo

You can play with this demo and see how jquery-globalize is used to format and parse numbers based on language selected from dropdown list.

In subsequent posts I will discuss some more jQuery globalization features.