Globalization

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

For more information on how globalization practices are implemented in KendoReact, 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 use the Spanish date format and month names in the available Date Inputs and how to localize their built-in messages.

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

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

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

import numbers from 'cldr-numbers-full/main/es/numbers.json';
import caGregorian from 'cldr-dates-full/main/es/ca-gregorian.json';
import dateFields from 'cldr-dates-full/main/es/dateFields.json';
import timeZoneNames from 'cldr-dates-full/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>DateTimePicker</p>
                            <DateTimePicker />
                            <p>DateRangePicker</p>
                            <DateRangePicker width={250} format="d.MMMM.yyyy" />
                            <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')
);

Internationalization

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

For more information, refer to:

Messages

The Date Inputs support the localization of their messages by utilizing the KendoReact Internationalization package.

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

Message KeyDefault Value
dateinput.incrementIncrease value
dateinput.decrementDecrease value
calendar.todayTODAY
datepicker.toggleCalendarToggle calendar
multiviewcalendar.prevViewNavigate to previous view
multiviewcalendar.nextViewNavigate to next view

Right-to-Left Support

The Date Inputs do not provide RTL support.

 /