The globalization plugin is used for getting info about user’s local language, date and time zone, currency etc. this could be necessary in order to enhance the user’s experience.

The following steps are to be followed:

Step 1 - Install Globalization Plugin

Install the plugin by typing the following code in command prompt window.

C:\Users\username\Desktop\CordovaProject>cordova plugin add cordova-plugin-globalization
 Step 2 - Adding Buttons

You can add four buttons to index.html file to call different methods that will be created later.

<button id = "Language">LANGUAGE</button>

<button id = "LocaleName">LOCALE NAME</button>
<button id = "Date">DATE</button>
<button id = "Currency">CURRENCY</button>

 

Step 3 - Adding Event Listeners

To ensure that our app and Cordova are loaded before we start using it, event listeners should be added in index.js file inside getDeviceReady function.

document.getElementById("Language").addEventListener("click", Language);

document.getElementById("LocaleName").addEventListener("click", LocaleName);
document.getElementById("Date").addEventListener("click", Date);
document.getElementById("Currency").addEventListener("click", Currency);

 Step 4.1 – Create Language Function

First you have to add a function in index.js. function that returns BCP 47 language tag of the user’s device.

We will use getPreferredLanguage method.The function has  two parameters onSuccess and onError.

function Language() {

   navigator.globalization.getPreferredLanguage(onSuccess, onError);
   function onSuccess(language) {
      alert('language: ' + language.value + '\n');
   }
   function onError(){
      alert('Error getting language');
   }
}

 when we press LANGUAGE button, the alert message box will be displayed on the screen.

Apache Cordova- Globalization

Step 4.2 - Create Locale Function

The function will return BCP 47 tag for the user’s locale settings. This is similar to the previously created function. The only difference is that we are using LocaleName method this time.

function LocaleName() {

   navigator.globalization.getLocaleName(onSuccess, onError);
   function onSuccess(locale) {
      alert('locale: ' + locale.value);
   }
   function onError(){
      alert('Error getting locale');
   }

}

 

Once we click on LOCALE button, the alert box will display our locale tag.

Apache Cordova- Globalization

Step 4.3 – Create Date Function

This function will return the current date according to user’s locale and time zone settings. 

date parameter is the current date and options parameter is optional.

function Date() {

   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');    }
}

 

Now, when you run the app and press DATE button you will see the current date.

Apache Cordova- Globalization

The last function that we will create will return the currency values according to the user’s device settings and ISO 4217 currency code.

function Currency() {

   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');
   }
}


 When you click the CURRENCY button, it  will display the alert box showing users currency pattern.

Apache Cordova- Globalization

This plugin offers other methodsalso, that are listed below in the table:

method

parameters

details

getPreferredLanguage

onSuccess, onError

Returns client's current language.

getLocaleName

onSuccess, onError

Returns client's current locale settings.

dateToString

date, onSuccess, onError, options

Returns date according to client's locale and timezone.

stringToDate

dateString, onSuccess, onError, options

Parses a date according to client's settings.

getCurrencyPattern

currencyCode, onSuccess, onError

Returns client's currency pattern.

getDatePattern

onSuccess, onError, options

Returns client's date pattern.

getDateNames

onSuccess, onError, options

Returns an array of names of the months, weeks or days according to client's settings.

isDayLightSavingsTime

date, successCallback, errorCallback

Used to determine if the daylight saving time is active according to client's time zone and calendar.

getFirstDayOfWeek

onSuccess, onError

gives the first day of the week according to user’s settings.

numberToString

number, onSuccess, onError, options

Returns number according to client's settings.

stringToNumber

string, onSuccess, onError, options

Parses a number according to client's settings.

getNumberPattern

onSuccess, onError, options

Returns the number pattern according to client's settings.

 

Read Our Previous posts: Handling Events in App Built Using Apache Cordova

Cordova- plugman

  Modified On Mar-19-2018 03:21:56 AM

Leave Comment