Globalization

The globalization process combines the translation of component messages with adapting them to specific cultures.

For more information on how globalization practices are implemented in Kendo UI for Angular, refer to the overview article. For more information on the globalization aspects which are available for each component, refer to the article on globalization support.

The following example demonstrates how to:

  • Set a Spanish culture locale.
  • Use the Spanish date format, month names, and today title in the Calendar.
  • Use the Spanish date format and the increment and decrement button titles in the DateInput.
  • Use the Spanish date format, month names, today Calendar title, and toggle button title in the DatePicker.
  • Use the Spanish time format, now, cancel, and set time-list buttons, and toggle button title in the TimePicker.
  • Use the Spanish date and time format, month names, today, now, date, and time tabs, cancel and set buttons, and toggle button title in the DateTimePicker.
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';
import { IntlModule } from '@progress/kendo-angular-intl';

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

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

export class AppModule { }
import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    styles: [ '.k-calendar { margin: 0 auto; }' ],
    template: `
      <div class="row example-wrapper" style="min-height: 450px;">
          <div class="col-xs-12 col-md-6 example-col">
              <p>DateInput</p>
              <p>Hover the increment/decrement buttons to see localized messages:</p>
                <kendo-dateinput [spinners]="true">
                   <kendo-dateinput-messages
                     increment="Incrementar valor"
                     decrement="Disminuir valor"
                     ></kendo-dateinput-messages>
                  </kendo-dateinput>

              <p>DatePicker</p>
              <p>Hover the toggle button or open the popup to see the custom messages:</p>
              <kendo-datepicker>
                  <kendo-datepicker-messages
                      today="Hoy"
                      toggle="Cambiar calendario"
                  ></kendo-datepicker-messages>
              </kendo-datepicker>

              <p>TimePicker</p>
              <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>

              <p>DateTimePicker</p>
              <p>Hover the toggle button or open the popup to see the custom messages:</p>
              <kendo-datetimepicker>
                  <kendo-datetimepicker-messages
                      today="Hoy"
                      toggle="Cambiar calendario"
                      dateTab="Fecha"
                      dateTabLabel="Mostrar fecha"
                      timeTab="Hora"
                      timeTabLabel="Mostrar hora"
                      now="Ahora"
                      nowLabel="Ahora"
                      accept="Acceptar"
                      acceptLabel="Seleccione el tiempo"
                      cancel="Cancelar"
                      cancelLabel="Cancelar cambios"
                  >
                  </kendo-datetimepicker-messages>
              </kendo-datetimepicker>
          </div>
          <div class="col-xs-12 col-md-6 example-col">
              <p>Calendar</p>
              <kendo-calendar>
                <kendo-calendar-messages today="Hoy">
                </kendo-calendar-messages>
              </kendo-calendar>
          </div>
      </div>
  `
})
export class AppComponent {
    public value: Date = new Date();
}
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

The internationalization (i18n) process applies specific culture formats to a web application.

For more information, refer to:

Messages

The Date Inputs support both built-in and custom messages.

Built-In Messages

To translate the built-in Date Inputs 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 instance of any Date Inputs 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 Calendar, DateInput, DatePicker, DateTimePicker, and TimePicker.

@Component({
  selector: 'my-app',
  styles: [ '.k-calendar { margin: 0 auto; }' ],
  template: `
      <div class="row example-wrapper" style="min-height: 450px;">
        <div class="col-xs-12 col-md-6 example-col">
            <p>DateInput</p>
            <p>Hover over the <bold>Increment/ Decrement</bold> buttons to see custom messages:</p>
                <kendo-dateinput [spinners]="true">
                    <kendo-dateinput-messages
                        increment="Custom increment"
                        decrement="Custom decrement"
                    ></kendo-dateinput-messages>
                </kendo-dateinput>

            <p>DatePicker</p>
            <p>Hover over the <bold>Toggle</bold> button or open the popup to see the custom messages:</p>
                <kendo-datepicker>
                    <kendo-datepicker-messages
                        today="Custom today"
                        toggle="Custom toggle button"
                    ></kendo-datepicker-messages>
                </kendo-datepicker>

            <p>TimePicker</p>
            <p>Hover over the <bold>Toggle</bold> 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>

            <p>DateTimePicker</p>
            <p>Hover over the <bold>Toggle</bold> button or open the popup to see the custom messages:</p>
            <kendo-datetimepicker>
                <kendo-datetimepicker-messages
                    today="Hoy"
                    toggle="Cambiar calendario"
                    dateTab="Fecha"
                    dateTabLabel="Mostrar fecha"
                    timeTab="Hora"
                    timeTabLabel="Mostrar hora"
                    now="Ahora"
                    nowLabel="Ahora"
                    accept="Acceptar"
                    acceptLabel="Seleccione el tiempo"
                    cancel="Cancelar"
                    cancelLabel="Cancelar cambios"
                >
                </kendo-datetimepicker-messages>
            </kendo-datetimepicker>
        </div>
        <div class="col-xs-12 col-md-6 example-col">
            <p>Calendar</p>
            <kendo-calendar>
              <kendo-calendar-messages today="Custom Today">
              </kendo-calendar-messages>
            </kendo-calendar>
        </div>
     </div>
  `
})
class AppComponent {
    public value: Date = new Date();
}

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

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

@Component({
    selector: 'my-app',
    template: `
        <kendo-multiviewcalendar>
            <kendo-multiviewcalendar-messages today="Custom Today">
            </kendo-multiviewcalendar-messages>
        </kendo-multiviewcalendar>
    `
})
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);

Right-to-Left Support

The Date Inputs do not provide RTL support.

In this article