KendoReact DatePicker Overview

The KendoReact DatePicker component offers a highly customizable interface for the user to enter and pick dates supporting different locales.

Its features cover everything from setting a default value and selecting a date range to form validation and keyboard shortcuts.

Features Preview and Demo

Among the many features which the DatePicker delivers are:

  • Setting the default value—Easily configure the initial value that the DatePicker renders.
  • Form validation—Validate input values, set validation requirements (such as minimum and maximum date) and prevent the submission of forms which are in an invalid state.
  • Formats and placeholders—Control the date format and implement placeholders for its input field, including custom formats.
  • Controlled state—Control the date value and popup state of the DatePicker.
  • Disabled state—To disable input, just change a single property.
  • JSON integration—You can also bind the DatePicker to dates which are serialized as strings.
  • Custom rendering—You can replace the DatePicker input field, calendar and popup child components with custom ones.
  • Date limits—Enable the user to pick a date within a predefined min and max date range.
  • Focused dates—Configure the initial date value the DatePicker displays.
  • Accessibility support—The DatePicker is compliant with WAI-ARIA and Section 508.
import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { DatePicker } from '@progress/kendo-react-dateinputs';
import { DropDownList } from '@progress/kendo-react-dropdowns';
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-ES');
class App extends React.Component {
    locales = [
        {
            language: 'en-US',
            locale: 'en'
        },
        {
            language: 'es-ES',
            locale: 'es'
        }
    ]
    state = { selectedLocale: this.locales[0], value: new Date() };
    render() {
        return (
            <LocalizationProvider language={this.state.selectedLocale.language}>
                <IntlProvider locale={this.state.selectedLocale.locale}>
                    <div className="example-wrapper row">
                        <div className="col-xs-12 col-md-12 example-config">
                            <h6>Locale: <DropDownList
                                value={this.state.selectedLocale}
                                data={this.locales}
                                textField={'locale'}
                                onChange={(e) => {
                                    this.setState({ selectedLocale: e.target.value });
                                }} />
                            </h6>
                        </div>
                        <div className="col-xs-12 col-md-6 example-col">
                            <p>Default Show</p>
                            <DatePicker defaultValue={new Date()} defaultShow />
                            <p>Format and WeekColumn</p>
                            <DatePicker defaultValue={new Date()} format="dd/MMM/yyyy" weekNumber={true} />
                            <p>Disabled</p>
                            <DatePicker disabled defaultValue={new Date()} format="dd/MMMM/yyyy" />
                        </div>
                    </div>
                </IntlProvider>
            </LocalizationProvider>
        );
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

This demo implements some of the features that are available in the DatePicker.

  • When the React DatePicker is initially loaded, you can render a specific default value for that date.
  • You can change the date format and render a week number column.
  • With the globalization feature, you can change the languages and cultures by using the Locale drop-down list.

Trial Version and Commercial License

The React DatePicker component is part of KendoReact, a commercial UI library. You are welcome to explore its full functionality and get technical support from the team when you register for a free 30-day trial. To use it commercially, you need to purchase a license. Feel free to review the KendoReact License Agreement to get acquainted with the full terms of use.

Support Options

For any issues you might encounter while working with the KendoReact DatePicker, use any of the available support channels:

  • KendoReact license holders and active trialists can take advantage of our outstanding customer support delivered by the developers building the library. To submit a support ticket, use the KendoReact dedicated support system.
  • KendoReact forums are part of the free support you can get from the community and from the KendoReact team on all kinds of general issues.
  • KendoReact feedback portal and KendoReact roadmap provide information on the features in discussion and also the planned ones for release.
  • KendoReact uses GitHub Issues as its bug tracker and you can submit any related reports there. Also, check out the closed list.
  • You may still need a tailor-made solution for your project. In such cases, go straight to Progress Services.
 /