Components
    • Animation
    • Barcodes
    • Buttons
    • Charts
    • Common Utilities
    • Conversational UI
    • Data Grid
    • Data Query
    • Data Tools
    • Date Inputs
    • Date Math
    • Dialogs
    • Drawing
    • Dropdowns
    • Editor
    • Excel Export
    • File Saver
    • Form
    • Gantt
    • Gauges
    • Indicators
    • Inputs
    • Labels
    • Layout
    • ListBox
    • ListView
    • Mapbeta
    • Notification
    • PDF Processing
    • PivotGrid
    • Popup
    • Progress Bars
    • Ripple
    • Scheduler
    • ScrollView
    • Sortable
    • TaskBoard
    • Tooltips
    • TreeList
    • TreeView
    • Upload
    Sample Applications
    Styling & Themes
    Common Features
    Project Setup
    Changelog

KendoReact Date Inputs Overview

The KendoReact Date Inputs enable the user to pick up dates for scheduling appointments.

The KendoReact Date Inputs are native KendoReact components built specifically for the React ecosystem. The KendoReact library is distributed through npm packages, and the Date Inputs are available as @progress/kendo-react-dateinputs.


The following example demonstrates the Calendar, DateInput, DatePicker, and TimePicker components in action.

Example
View Source
Change Theme:

Key Features

The KendoReact Date Inputs provide a wide and always growing range of built-in features that isn't limited by the list in this section. This developer-friendly feature set allows you to create beautiful and functional applications faster. At the same time, the KendoReact development team works constantly to improve the performance of the components and their capabilities.

Forms Support

You can easily integrate the Date Inputs with the native KendoReact implementation of HTML5 form validation. With the forms, you can validate input values and prevent the submission of incomplete or invalid forms. Read more about the forms support of the DatePicker component...

Formats

The format property allows you to control how the Date Inputs display the dates. Read more about the format of the DateInput component...

Customization

The Date Inputs give you the flexibility to customize their rendering and fully transform the appearance of their child componentsfrom the simple toggle button to the Calendar popup. In addition to the various built-in configuration options, you have three gorgeous KendoReact themes to choose from. If desired, you can customize these themes or use the Theme Builder to create new themes. Read more about the customization of the DatePicker component...

Keyboard Navigation

The Date Inputs support numerous keyboard shortcuts that allow users to interact with the components. Read more about the keyboard navigation of the Calendar...

Globalization

The KendoReact Date Inputs come with globalization features that allow you to create applications that can be used all over the world. This is achieved by combining the translation of component messages with adaptation to specific cultures. Read more about the globalization of the Date Inputs library...

Accessibility

The KendoReact Date Inputs are accessible for screen readers and provide full WAI-ARIA support. Read more about the accessibility support of the DatePicker...

Support Options

For any questions about the use of the KendoReact Date Inputs, or any other KendoReact components, there are several support options available:

  • KendoReact license holders and anyone in an active trial can take advantage of the outstanding KendoReact customer support delivered by the developers who built the library. To submit a support ticket, use the Telerik support system.
  • The 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 those planned for release.
  • KendoReact uses GitHub Issues as its bug tracker, and you can submit any related reports there. Also, check out the closed list.
  • Need something unique that is tailor-made for your project? Progress offers its Progress Services group that can work with you to create any customized solution that you might need.