Cordova Globalization

This plug-in is used to obtain information about the user's language region language, date and time zone, currency, and so on.

Step 1 - Install a global plug-in

Open the command prompt and install the plug-in by typing the following code.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization

Step 2 - Add a button

We'll add .html to the index tag so that we can call the different methods we'll create later.

<button id = "getLanguage">LANGUAGE</button>
<button id = "getLocaleName">LOCALE NAME</button>
<button id = "getDate">DATE</button>
<button id = "getCurrency">CURRENCY</button>

Step 3 - Add an event listener

The event listener will be added to the getDeviceReady function in the index .js file to ensure that our application and Cordova load before we start using it.

document.getElementById("getLanguage").addEventListener("click", getLanguage);
document.getElementById("getLocaleName").addEventListener("click", getLocaleName);
document.getElementById("getDate").addEventListener("click", getDate);
document.getElementById("getCurrency").addEventListener("click", getCurrency);

Step 4A - Language function

The first function we used returned the BCP 47 language label for the client device. /b10> We'll use the getPreferredLanguage method. /b11> The function has two parameters, onSuccess and onError. /b12> Let'.js add this function to the index.

function getLanguage() {
   navigator.globalization.getPreferredLanguage(onSuccess, onError);

   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }

   function onError(){
      alert('Error getting language');
   }
	
}

Once the LANGUAGE button is pressed, the alert is displayed on the screen.

Step 4B - Zone function

This function returns the BCP 47 label for the client locale. /b10> This function is similar to the one we created earlier. /b11> The only difference is that we're using the getLocaleName method this time.

function getLocaleName() {
   navigator.globalization.getLocaleName(onSuccess, onError);

   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }

   function onError(){
      alert('Error getting locale');
   }
	
}

When we click the LOCALE button, the reminder displays our locale label.

Step 4C - Date function

This feature is used to return dates based on the client's locale and time zone settings. /b10> The date parameter is the current date, and the options parameter is optional.

function getDate() {
   var date = new Date();

   var options = {
      formatLength:'short',
      selector:'date and time'
   }

   navigator.globalization.dateToString(date, onSuccess, onError, options);

   function onSuccess(date) {
      alert('date: ' + date.value);
   }

   function onError(){
      alert('Error getting dateString');
   }
	
}

We can now run the application and press the DATE button to see the current date.

The last feature we'll show is to return currency values based on the client's device settings and ISO 4217 currency code. /b10> You can see that the concept is the same.

function getCurrency() {
   var currencyCode = 'EUR';
   navigator.globalization.getCurrencyPattern(currencyCode, onSuccess, onError);

   function onSuccess(pattern) {
      alert('pattern: '  + pattern.pattern  + '\n' +
         'code: '     + pattern.code     + '\n' +
         'fraction: ' + pattern.fraction + '\n' +
         'rounding: ' + pattern.rounding + '\n' +
         'decimal: '  + pattern.decimal  + '\n' +
         'grouping: ' + pattern.grouping);
   }

   function onError(){
      alert('Error getting pattern');
   }
	
}

The CURRENCY button triggers an alert that shows the user's currency pattern.

This plug-in provides additional methods. /b10> You can see all of them in the table below.