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

    weekData, numbers,

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 className="col-xs-12 col-md-6 example-col">
                            <Calendar value={this.state.value} />
                        <div className="col-xs-12 col-md-6 example-col">
                            <DatePicker />
                            <TimePicker />
                                <DateInput value={this.state.value} width={250} spinners={true} />
                            <br />
                                <DateInput width={250} />
                            <br />
                                <DateInput width={250} format="d.MMM.y, hh:mm:ss EEEE" />
                            <br />
                                <DateInput width={250} format="d.MMMM.yyyy" />

    <App />,
    "datepicker": {
        "toggleCalendar": "Alternar calendario"
    "calendar": {
        "today": "Hoy"
    "dateinput": {
        "increment": "Incrementar valor",
        "decrement": "Disminuir valor"


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

For more information, refer to:


The DateInputs 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 Key Default Value
dateinput.increment Increase value
dateinput.decrement Decrease value TODAY
datepicker.toggleCalendar Toggle calendar
multiviewcalendar.prevView Navigate to previous view
multiviewcalendar.nextView Navigate to next view

Right-to-Left Support

The DateInputs do not provide RTL support.

In this article