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.
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.
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.
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.
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.
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.
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.
The React DateInput supports adding floating labels as part of its input. This feature displays an initial message within the component, which then floats outside the component when the user enters the input. The floating label is then replaced by the mask of the component, ensuring that users are aware of the content format they should adhere to.
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.
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.
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.
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.