New to Kendo UI for Angular? Start a free 30-day trial

Parsing and Formatting of Dates and Numbers

The Kendo UI Internationalization package for Angular utilizes the Kendo UI Internationalization modules for date and number parsing and formatting, and builds on top of them to adapt them to the Angular context.

For more information on parsing and formatting date and number options, refer to the kendo-intl GitHub repository.

Modules for Date and Number Operations

The available internationalization methods are based on the Unicode Common Locale Data Repository (CLDR) data and are split into the following modules:

Loading Locales

To load the required locale use one of the following approaches:

Using Pre-Built Locales

This package provides pre-built locales which are generated from the Unicode® CLDR and simplify the loading of the requested data.

The pre-built locale data in the kendo-angular-intl package might be outdated with respect to the current CLDR release.

To load a pre-built locale, import its module(s) using the following template:

import '@progress/kendo-angular-intl/locales/{locale-name}/{locale-part}';

The locale-name of the previous example can be any available locale, for example, bg, de, or fr.

The locale-part indicates which part of the locale will be loaded and can be any of the following:

  • all
  • calendar
  • currencies
  • numbers

The following example demonstrates how to load the full Bulgarian (bg) locale data and the German (de) calendar information.

// Load all required data for the bg locale.
import '@progress/kendo-angular-intl/locales/bg/all';

// Load the required calendar data for the de locale.
import '@progress/kendo-angular-intl/locales/de/calendar';

Using CLDR-JSON Data

The cldr-json project is the reference source of data for all locales. Compared to the usage of the pre-built locales in your project, the usage of the cldr-json packages is more demanding because it requires you to load the data from JSON files.

To use the CLDR-JSON data, install the following subset of CLDR-JSON packages:

npm install --save cldr-core cldr-dates-full cldr-numbers-full

To apply the methods for different locales, load the likelySubtags and the locale data by using the load method.

Additionally, the library requires you to load:

  • The supplemental currencyData for the default currency formatting.
  • The weekData for the day of week formatting.
import { load } from '@progress/kendo-angular-intl';

load(
    require('cldr-core/supplemental/likelySubtags.json'),
    require('cldr-core/supplemental/currencyData.json'),
    require('cldr-core/supplemental/weekData.json'),

    require('cldr-numbers-full/main/bg/numbers.json'),
    require('cldr-numbers-full/main/bg/currencies.json'),

    require('cldr-dates-full/main/bg/dateFields.json'),
    require('cldr-dates-full/main/bg/ca-gregorian.json'),
    require('cldr-dates-full/main/bg/timeZoneNames.json')
);

Date Parsing

Date parsing converts a string into a Date object by using the specific settings of the locale. For more information on date parsing, refer to the kendo-intl Date Parsing section.

Example
View Source
Change Theme:

Date Formatting

Date formatting converts a Date object into a human-readable string by using the specific settings of the locale. For more information on date formatting, refer to the kendo-intl Date Formatting section.

Example
View Source
Change Theme:

Number Parsing

Number parsing converts a string into a Number object by using the specific settings of the locale. For more information on number parsing, refer to the kendo-intl Number Parsing section.

Example
View Source
Change Theme:

Number Formatting

Number formatting converts a Number object into a human-readable string using the specific settings of the locale. For more information on number formatting, refer to the kendo-intl Number Formatting section.

Example
View Source
Change Theme:

General Formatting

General formatting provides methods for independent placeholder and type formatting by using the specific settings of the locale. For more information on general formatting, refer to the kendo-intl General Formatting section.

Example
View Source
Change Theme: