Coding With Fun
Home Docker Django Node.js Articles Python pip guide FAQ Policy

Cordova Globalization

May 21, 2021 Cordova

Table of contents

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.

Cordova Globalization

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.

Cordova Globalization

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 = {
      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.

Cordova Globalization

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.

Cordova Globalization

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

Method Parameters Details
getPreferredLanguage onSuccess,onError Returns the client's current language.
getLocaleName onSuccess,onError Returns the client's current locale settings.
dateToString Date, onSuccess, onError, options The date is returned based on the customer's locale and time zone.
stringToDate dateString,onSuccess,onError,options The date is resolved according to the client's settings.
getCurrencyPattern currencyCode,onSuccess,onError Returns the customer's currency pattern.
getDatePattern onSuccess,onError,options Returns the client's date mode.
getDateNames onSuccess,onError,options Returns an array of names for months, weeks, or days, depending on the client's settings.
isDayLightSavingsTime date,successCallback,errorCallback Used to determine whether daylight saving time is active based on the client's time zone and calendar.
getFirstDayOfWeek onSuccess,onError Returns the first day of the week based on client settings.
numberToString number,onSuccess,onError,options The number is returned according to the client's settings.
stringToNumber string,onSuccess,onError,options Resolve a number based on the client's settings.
getNumberPattern onSuccess,onError,options Returns digital mode based on the client's settings.