All Components

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

The locales shipped with the @progress/kendo-angular-intl package are based on the CLDR database.

The import format is as follows:

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

The locale-name of the above example could any available locale, e.g. bg, de, fr.
The locale-part tells which part of the locale should be loaded. It could be:

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

To download the full CDLR database, install the cldr-data module by running the npm install --save cldr-data command. 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-data/supplemental/likelySubtags.json"),
    require("cldr-data/supplemental/currencyData.json"),
    require("cldr-data/supplemental/weekData.json"),

    require("cldr-data/main/bg/numbers.json"),
    require("cldr-data/main/bg/currencies.json"),
    require("cldr-data/main/bg/ca-gregorian.json"),
    require("cldr-data/main/bg/dateFields.json"),
    require("cldr-data/main/bg/timeZoneNames.json")
);

Date Parsing

Date parsing converts a string to 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.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>String "11/6/2000" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ enDate.toString() }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>String "Montag, 6.11.2000" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ deDate.toString() }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12">
        <div class="col-xs-12 col-md-9">
            <h5>String "2000-11-06T10:30Z"to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ utcDate.toString() }}</em></strong>
        </div>
    </div>
    `
})
export class AppComponent {
    public enDate: Date = this.intl.parseDate('11/6/2000', ['G', 'd']);
    public deDate: Date = this.intl.parseDate('Montag, 6.11.2000', 'EEEE, d.MM.y', 'de');
    public utcDate: Date = this.intl.parseDate('2000-11-06T10:30Z');

    constructor(public intl: IntlService) {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntlModule } from '@progress/kendo-angular-intl';

import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, IntlModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Date Formatting

Date formatting converts a Date object to 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.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format 2000-11-06 using 'd'</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatDate(dateValue, "d") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format 2000-11-06 using 'y.M.d'</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatDate(dateValue, "y.M.d", "de") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12">
        <div class="col-xs-12 col-md-9">
            <h5>Format 2000-11-06 using "EEEE, d.MM.y"</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatDate(dateValue, "EEEE, d.MM.y", "bg") }}</em></strong>
        </div>
    </div>
    `
})
export class AppComponent {
    public dateValue: Date = new Date(2000, 10, 6);

    constructor(public intl: IntlService) {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntlModule } from '@progress/kendo-angular-intl';

import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, IntlModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Number Parsing

Number parsing converts a string to 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.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>String "12.22" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ floatNumber.toString() }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>String "1.212,22 €" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ currency.toString() }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>String "10.26 %" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ percentage.toString() }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12">
        <div class="col-xs-12 col-md-9">
            <h5>String "1,0000123e+4" to parse</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ exponential.toString() }}</em></strong>
        </div>
    </div>
    `
})
export class AppComponent {
    public floatNumber: number = this.intl.parseNumber('12.22'); // 12.22
    public currency: number = this.intl.parseNumber('1.212,22 €', 'de'); // 1212.22
    public percentage: number = this.intl.parseNumber('10.26 %'); // 0.1026
    public exponential: number = this.intl.parseNumber('1,0000123e+4', 'bg'); // 10000.123

    constructor(public intl: IntlService) {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntlModule } from '@progress/kendo-angular-intl';

import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, IntlModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Number Formatting

Number formatting converts a Number object to 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.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format 1234.567 using a 'n2' format</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatNumber(1234.567, "n2") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format 1234.567 using a 'c' format</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatNumber(1234.567, "c", "de") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format 1234.567 using custom format options</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatNumber(1234.567, customCurrencyOptions, "bg") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12">
        <div class="col-xs-12 col-md-9">
            <h5>Format 1234.567 using a customr'##,#.00' format</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.formatNumber(2345678, "##,#.00") }}</em></strong>
        </div>
    </div>
    `
})
export class AppComponent {
    public customCurrencyOptions = {
        style: 'currency',
        currency: 'USD',
        currencyDisplay: 'displayName'
    };

    constructor(public intl: IntlService) {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntlModule } from '@progress/kendo-angular-intl';

import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, IntlModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

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.

import { Component } from '@angular/core';
import { IntlService } from '@progress/kendo-angular-intl';

@Component({
    selector: 'my-app',
    template: `
    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Format Date and Number</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.format('Date: {0:d} - Price: {1:c}', formatData , "en") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Convert Date to String</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.toString(newDate, "d") }}</em></strong>
        </div>
    </div>

    <div class="col-xs-12 col-md-12" style="margin-bottom: 1em;">
        <div class="col-xs-12 col-md-9">
            <h5>Convert Number to String</h5>
        </div>
        <div class="col-xs-12 col-md-9" style="font-size: 1.2em;">
            Result: <strong><em>{{ intl.toString(10.5, "c", "bg") }}</em></strong>
        </div>
    </div>
    `
})
export class AppComponent {
    public formatData: any[] = [new Date(), 10.5];
    public newDate: Date = new Date();

    constructor(public intl: IntlService) {}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { IntlModule } from '@progress/kendo-angular-intl';

import '@progress/kendo-angular-intl/locales/bg/all';
import '@progress/kendo-angular-intl/locales/de/all';

import { AppComponent } from './app.component';

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, IntlModule ]
})
export class AppModule { }
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);
In this article