All Components

This website hosts native Kendo UI components, built from the ground up with the ultimate performance in mind, intended to be used in the React ecosystem.

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 Kendo UI for React, 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 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-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>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 internationalization process applies specific culture formats to a web application.

For more information, refer to:

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

Right-to-Left Support

The DateInputs do not provide RTL support.

In this article