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.
This is a Free React DatePickerThe KendoReact DatePicker is free to use, including in production—no sign-up or license required. Check out all 120+ free and premium UI components in the enterprise-grade KendoReact library.Change Theme
Theme
Loading ...
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.
The DatePicker is part of the KendoReact Date Inputs component library. The procedures for installing, importing, and using the Date Inputs are identical for all components in the package. To learn how to use the DatePicker and the rest of the Date Inputs, see the Getting Started with the KendoReact Date Inputs guide.
Key Features
- 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 invalid forms.
- 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 that 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 only within a predefined min and max date range.
- Focused dates—Configure the initial focused date that the DatePicker displays.
- Accessibility support—The DatePicker is compliant with WAI-ARIA and Section 508.
- Events—To customize the behavior of the DatePicker, you can handle the numerous events that it generates.
- KendoReact DatePicker and all KendoReact components are natively written with TypeScript and provide all the benefits of TypeScript, such as typings, IntelliSense, and many others.