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 the USD is set as default currencyCode for all Syncfusion Vue components.

Loading Culture Data

It requires the following CLDR data to be loaded using the 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, you can install it through the 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 currencyCode for all Syncfusion Vue components, you can use the methods setCulture for setting default locale and setCurrencyCode for setting the currencyCode.

Setting Global Culture

import {setCulture} from '@syncfusion/ej2-base';

setCulture('ar');

Setting Currency Code

import { setCurrencyCode} from '@syncfusion/ej2-base';

setCurrencyCode('QAR');

Note: If global culture is not set then en-US is set as default locale and the USD is set as a 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 in the 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 are also supported by specifying the pattern directly in the format property of NumberFormatOptions. Custom number format can be achieved by using one or more custom format specifiers listed in the below table.

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

Number formatting

getNumberFormat

The getNumberFormat method which will return a function that formats given numbers 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 numeric value andNumberFormatOptions 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>

Parsing

getNumberParser

The getNumberParser method which will return a function that parses 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, 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>

Manipulating DateTime

Supported Format String

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

Date type skeletons

Time type skeletons

DateTime type skeletons

Additional skeletons

Apart from the standard date type formats additional format are supported by using the additional skeletons given in 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. The 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 format property is given in options other properties are not considered.

Formatting

getDateFormat

The getDateFormat method which will return a function that formats 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 date object, DateFormatOptions 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 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>

Parsing

getDateParser

The getDateParser method which will return a function that parses 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 parseDate method which takes two argument’s string value, DateFormatOptions and returns the date Object.

<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>