React DateInput

Overview

The React DateInput is a perfect input component for handling quick and efficient date values. Thanks to the built-in formatting and strict date handling, the component only accepts valid date options and will not accept any letters or symbols.

See React DateInput Overview demo

React DateInput – Overview, KendoReact UI Library

Disabled DateInput

By default, the KendoReact DateInput is enabled, but certain requirements may call for the React DateInput component to be disabled until a certain condition is met. With a single property, the KendoReact DateInput can change its appearance to indicate that the component is disabled and prevent any interaction.

See React DateInput Disabled demo

React DateInput Disabled KendoReact UI Library

Spin Buttons

The Spin Buttons of the KendoReact DateInput, enabled by a single property, quickly increases or decreases the currently selected portion of the date. This means days, months and years can all be interacted with through the spin buttons as users tab or click throughout the current date value.

See React DateInput Spin Buttons demo

React DateInput – Spin Buttons, KendoReact UI Library

Incremental Steps

With the Incremental Steps feature, the KendoReact DateInput spin buttons can increase or decrease values based on pre-defined increments and can be defined granularly on every part of the date. This means your days could be changed by one, while the month is incremented in steps of three of four, and so on.

See React DateInput Incremental Steps demo

React DateInput – Incremental Steps, KendoReact UI Library

Date Limits

The KendoReact DateInput can accept any valid date, no matter how far in the past or in to the future the date may be. With the Date Limits feature, the React DateInput can define a minimum and maximum value and prevent the user from typing in a day outside of this range.

See React DateInput Date Limits demo

React DateInput – Date Limits, KendoReact UI Library

Formats

Date formats are extremely varied and luckily there are standard date and time format strings that can be followed. With this in mind, the KendoReact DateInput supports any valid string format, all controlled by a single property.

See React DateInput Formats demo

React DateInput – Formats, KendoReact UI Library

Placeholders

Placeholders are useful to indicate to end users what kind of format that the React DateInput expects their date to be. This is why the KendoReact DateInput component comes with a few predefined formats for the placeholder as well as the ability for developers to completely customize every part of the placeholder that the users see.

See React DateInput Placeholders demo

React DateInput – Placeholders, KendoReact UI Library

Forms Support

Thanks to built-in configuration options like min, max, required, as well as overall styling for invalid states and validation messages, the KendoReact DateInput can easily integrate into any existing form, whether this is the KendoReact Form component, or any other React form library.

See React DateInput Forms Support demo

React DateInput – Forms Support, KendoReact UI Library

Globalization

The KendoReact DateInput component supports globalization out of the box, which means that the format of the date placeholder and date can change depending on the locale of the user without needing to manually reconfigure the React component.

See React DateInput Globalization demo

React DateInput – Globalization, KendoReact UI Library

Keyboard Navigation

Keyboard Navigation is a critical part of modern web applications and the KendoReact DateInput component contains features to easily help input a date without needing a mouse.

See React DateInput Keyboard Navigation demo

Accessibility

Continuing a tradition of putting accessibility at the forefront of building React UI components, the KendoReact DateInput is AAA rated for WCAG 2.0, and compliant with both WAI-ARIA and Section 508 standards.

See React DateInput Accessibility demo

React DateInput - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.