Internationalization

The Internationalization library provides support for formatting and parsing date and number objects using the official Unicode CLDR JSON data. The en-US locale is set as default culture and USD is set as default _currencyCode_ for all Syncfusion Vue UI Components.

Loading culture data

It requires the following CLDR data to be load using loadCldr function for cultures other than en-US.

Note: For en, dependency files are already loaded in the library.

Installing CLDR data

CLDR data is available as npm package. So, we can install it through below command to our package.

npm install cldr-data

Binding to i18n library

import { loadCldr } from '@syncfusion/ej2-base';
loadcldr(enNumberData, entimeZoneData);

Changing Global Culture and Currency Code

To set the default culture and the currency code for all Syncfusion Vue UI Components, you can use the methods setCulture for setting the default locale and setCurrencyCode for setting the currency code.

import {setCulture, setCurrencyCode} from '@syncfusion/ej2-base';
setCulture('ar');
setCurrencyCode('QAR');

Note: If global culture is not set, then en-US is set as the default locale, and USD is set as the default currency code.

Manipulating numbers

Supported format string

Based on the NumberFormatOptions number formatting and parsing operations are processed. You need to specify some or all of the following properties mentioned below table.

Note: The minimumIntegerDigits, minimumFractionDigits and maximumFractionDigits are categorized as group one, minimumSignificantDigits and maximumSignificantDigits are categorized as group two. If group two properties are defined, then the group one properties will be ignored.

Custom number formatting and parsing

Custom number formatting and parsing can also be achieved by directly specifying the pattern in the format property of NumberFormatOptions. One or more of the custom format specifiers listed in the table below can be used to create custom number format.

Note: If a custom format pattern is specified, other NumberFormatOptions properties will not be considered.

Number Parsing

getNumberParser

The getNumberParser method, which will return a function that parses a given string based on the NumberFormatOptions specified.

<template>
<div class="result"></div>
</template>
<script>

import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
mounted:function(){
var intl  = new Internationalization();
var nParser  =  intl.getNumberParser({ format:'P2' , useGrouping: false});
var val  = nParser('123567.45%');
document.querySelector('.result').innerHTML = val + '';
}
}
</script>
<style>
</style>

parseNumber

The parseNumber method, which takes two arguments, the string value and NumberFormatOptions and returns the numeric value.

<template>
  <div class="result"></div>
</template>
<script>
  
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
  mounted:function(){
  var intl  = new Internationalization();
  var val  = intl.parseNumber('1. ,234,545.650', { format: 'C3', currency: 'USD', minimumIntegerDigits: 8 });
  document.querySelector('.result').innerHTML = val + '';
}
}
</script>
<style>
</style>

Number formatting

getNumberFormat

The getNumberFormat method will return a function that formats a given number based on the NumberFormatOptions specified.

<template>
  <div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
  mounted:function(){
var  intl = new Internationalization();
var nFormatter = intl.getNumberFormat({ skeleton: 'C3', currency: 'USD',minimumIntegerDigits:8});
var formattedValue  = nFormatter(1234545.65)
document.querySelector('.result').innerHTML = formattedValue;
  }
}
</script>
<style>
</style>

formatNumber

The formatNumber method, which takes two arguments, a numeric value and NumberFormatOptions and returns the formatted string.

<template>
  <div class="result"> </div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
  mounted: function(){
var  intl = new Internationalization();
var formattedString  = intl.formatNumber(12345.65, { format:'C5' , useGrouping: false,
minimumSignificantDigits:1, maximumSignificantDigits:3 });
document.querySelector('.result').innerHTML = formattedString;
  }
}
</script>
<style>
</style>

Manipulating DateTime

Supported format string

Date formatting and parsing operations are performed based on the DateFormatOptions. You need to specify  some or all of the following properties mentioned in the table below.

Date type skeletons

Time type skeletons

DateTime type skeletons

Additional skeletons

Apart from the standard date type formats, additional formats are supported by using the additional skeletons given in the below table.

Note: Culture specific format skeletons are also supported.

Custom formats

To use the custom date and time formats, we need to specify the date/time pattern directly in the format property. A custom format string must contain one or more of the following standard date/time symbols.

Custom format example

import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
var intl  = new Internationalization();
var formattedString =  intl.formatDate(new Date('1/12/2014 10:20:33'), { format: '\'year:\'y' \'month:\' MM' });
//Output: "year:2014 month:01"

Note: If the format property is given as an option, other properties are not considered.

Date parsing

getDateParser

The getDateParser method will return a function that parses a given string based on the DateFormatOptions specified.

<template>
  <div class="result"> </div>
</template>
<script>
import Vue from 'vue';
import {Internationalization} from '@syncfusion/ej2-base';
export default {
  mounted:function(){
var intl  = new Internationalization();
var dParser  = intl.getDateParser({skeleton: 'full', type: 'dateTime'});
var val = dParser('Friday, November 4, 2016 at 1:03:04 PM GMT+05:30');
document.querySelector('.result').innerHTML = val.toString();
}
}
</script>
<style>
</style>

parseDate

The date object is returned by the parseDate method, which takes two arguments, a string value and DateFormatOptions.

<template>
  <div class="result"></div>
</template>
<script>
import Vue from 'vue';
import {Internationalization} from '@syncfusion/ej2-base';
export default {
  mounted:function(){
var intl = new Internationalization();
var val =  intl.parseDate('11/2016',{skeleton: 'yM'});
document.querySelector('.result').innerHTML = val.toString();

  }
}
</script>
<style>
</style>

Date Formatting

getDateFormat

The getDateFormat method, which will return a function that formats a given date object based on the DateFormatOptions specified.

<template>
  <div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
  mounted:function(){
var intl = new Internationalization();
var dFormatter = intl.getDateFormat({ skeleton: 'full', type: 'dateTime' });
var formattedString = dFormatter(new Date('1/12/2014 10:20:33'));
document.querySelector('.result').innerHTML = formattedString;
  }
}
</script>
<style>
</style>

formatDate

The formatDate method, which takes two arguments, the date object and DateFormatOptions, returns the formatted string.

<template>
  <div class="result"></div>
</template>
<script>
import Vue from 'vue';
import { Internationalization } from '@syncfusion/ej2-base';
export default {
  mounted:function(){
var intl  = new Internationalization();
var date  = new Date();
var formattedString  =  intl.formatDate(new Date('1/12/2014 10:20:33'), { skeleton: 'GyMMM' });
document.querySelector('.result').innerHTML = formattedString;

  }

}
</script>
<style>
 </style>