All Components

Globalization

Globalization is a process that combines the translation of component messages and the usage of specific culture locales.

The following example demonstrates how to use the Spanish date format, month names, now, cancel, and set time-list buttons, and toggle button title.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper">
            <p>Hover the toggle button or open the popup to see the custom messages:</p>
            <kendo-timepicker>
                <kendo-timepicker-messages
                    accept="Acceptar"
                    acceptLabel="Seleccione el tiempo"
                    cancel="Cancelar"
                    cancelLabel="Cancelar cambios"
                    now="Ahora"
                    nowLabel="Ahora"
                    toggle="Cambiar lista"
                ></kendo-timepicker-messages>
            </kendo-timepicker>
        </div>
    `
})
export class AppComponent {
}
import { LOCALE_ID, NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

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

/* Loading CLDR data */
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/es/numbers.json'),
    require('cldr-data/main/es/currencies.json'),
    require('cldr-data/main/es/dateFields.json'),
    require('cldr-data/main/es/ca-gregorian.json'),
    require('cldr-data/main/es/timeZoneNames.json')
);

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ],
  providers: [{ provide: LOCALE_ID, useValue: 'es' }]
})

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

Internationalization

Internationalization (i18n) is the process of applying specific culture locale formats to your application.

The TimePicker provides support for internationalization by utilizing the Kendo UI Internationalization package.

For more information on using locales that are different from the default one, refer to the article on Internationalization. For more information on the date and number formats Kendo UI for Angular supports, refer to the kendo-intl GitHub repository.

Localization

Localization (l10n) is the process of translating the component messages in specific languages.

Built-In Messages

To translate the built-in TimePicker messages, utilize the Angular i18n framework. For more information, refer to the article on Localization.

Custom Messages

You can also override individual messages for each TimePicker instance by utilizing the attribute bindings. To use them, you do not have to set up the application for i18n.

In i18n applications, message attributes take precedence over localized text from translation files.

The following example demonstrates how to customize the built-in messages of the TimePicker.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <div class="example-wrapper" style="min-height: 400px">
            <p>Hover the toggle button or open the popup to see the custom messages:</p>
            <kendo-timepicker>
                <kendo-timepicker-messages
                    accept="Acceptar"
                    acceptLabel="Seleccione el tiempo"
                    cancel="Cancelar"
                    cancelLabel="Cancelar cambios"
                    now="Ahora"
                    nowLabel="Ahora"
                    toggle="Cambiar lista"
                ></kendo-timepicker-messages>
            </kendo-timepicker>
        </div>
    `
})
export class AppComponent {
}
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { DateInputsModule } from '@progress/kendo-angular-dateinputs';

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

@NgModule({
  bootstrap:    [ AppComponent ],
  declarations: [ AppComponent ],
  imports:      [ BrowserModule, BrowserAnimationsModule, DateInputsModule ]
})

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