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