All Components

Globalization

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

Basic Usage

The following example demonstrates how to use the Spanish date format and month names in the available DateInputs components and how to localize their built-in messages.

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { Calendar, DateInput, DatePicker, TimePicker } from '@progress/kendo-react-dateinputs';
import { IntlProvider, load, loadMessages, LocalizationProvider } from '@progress/kendo-react-intl';

import likelySubtags from 'cldr-data/supplemental/likelySubtags.json';
import currencyData from 'cldr-data/supplemental/currencyData.json';
import weekData from 'cldr-data/supplemental/weekData.json';

import numbers from 'cldr-data/main/es/numbers.json';
import caGregorian from 'cldr-data/main/es/ca-gregorian.json';
import dateFields from 'cldr-data/main/es/dateFields.json';
import timeZoneNames from 'cldr-data/main/es/timeZoneNames.json';

load(
    likelySubtags,
    currencyData,
    weekData, numbers,
    caGregorian,
    dateFields,
    timeZoneNames
);

import esMessages from './es.json';
loadMessages(esMessages, 'es');

class App extends React.Component {
    state = { locale: 'es', value: new Date() };

    render() {
        return (
            <LocalizationProvider language={this.state.locale}>
                <IntlProvider locale={this.state.locale}>
                    <div className="example-wrapper row">
                        <div className="col-xs-12 col-md-12 example-config">
                            <h5>Current local - <em>{this.state.locale}</em></h5>
                        </div>
                        <div className="col-xs-12 col-md-6 example-col">
                            <p>Calendar</p>
                            <Calendar value={this.state.value} />
                        </div>
                        <div className="col-xs-12 col-md-6 example-col">
                            <p>DatePicker</p>
                            <DatePicker />
                            <p>TimePicker</p>
                            <TimePicker />
                            <p>DateInput</p>
                            <div>
                                <DateInput value={this.state.value} width={250} spinners={true} />
                            </div>
                            <br />
                            <div>
                                <DateInput width={250} />
                            </div>
                            <br />
                            <div>
                                <DateInput width={250} format="d.MMM.y, hh:mm:ss EEEE" />
                            </div>
                            <br />
                            <div>
                                <DateInput width={250} format="d.MMMM.yyyy" />
                            </div>
                        </div>
                    </div>
                </IntlProvider>
            </LocalizationProvider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
{
    "datepicker": {
        "toggleCalendar": "Alternar calendario"
    },
    "calendar": {
        "today": "Hoy"
    },
    "dateinput": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"
    }
}

Internationalization

The DateInputs provide support for internationalization by utilizing the Kendo UI Internationalization package.

For more information on using locales other than the default one, refer to the article on Internationalization. For more information on the date and number formats Kendo UI for React supports, refer to the kendo-intl GitHub repository.

Messages

The DateInputs support the localization of their messages by utilizing the Kendo UI Internationalization package.

The following table lists the built-in message keys and their default values.

Message key Default value
dateinput.increment Increase value
dateinput.decrement Decrease value
calendar.today TODAY
datepicker.toggleCalendar Toggle calendar
In this article