KendoReact DateInput Overview

The KendoReact DateInput represents an input field that recognizes and formats scheduling values such as dates.

The KendoReact DateInput component is part of the KendoReact library of React UI components. It is distributed through NPM under the kendo-react-dateinputs package.

The following example demonstrates the DateInput in action.

Change Theme

Theme

Loading ...

The DateInput 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 DateInput and the rest of the Date Inputs, see the Getting Started with the KendoReact Date Inputs guide.

Key Features

• Disabled state—To prevent users from interacting with the DateInput, you can render it in a disabled state until specific requirements are met.
• Spin buttons—The end-users can take advantage of the intuitive spin buttons that increase or decrease the selected date by a predefined step.
• Incremental steps—You can adjust the default step for increasing and decreasing each part of the date values.
• Date limits—You can configure a specific date limit that allows the user to select a date only within that predefined range.
• Formats—The format property allows you to control how the DateInput displays the dates.
• Placeholders— The DateInput allows you to render a text hint, floating label, and provide descriptions for its date format sections.
• Forms Support—With the forms, you can validate input values and prevent the submission of incomplete or invalid forms.
• Globalization—The DateInput comes with globalization features allowing you to create applications that can be used all over the world.
• Keyboard navigation—The DateInput supports various keyboard shortcuts that allow users to interact with the component.
• Accessibility—The DateInput is accessible for screen readers and provides full WAI-ARIA support.

Suggested Links

• API Reference of the DateInput
• Getting Started with the KendoReact Date Inputs
• React DateInput High-Level Overview