KendoReact DateTimePicker Overview

The DateTimePicker combines KendoReact DateInput, Calendar, and TimePicker component features, and enables the user to enter or pick a date and time values.


The following example demonstrates the DateTimePicker in action.

Example
View Source
Change Theme:

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

Key Features

  • Disabled DateTimePicker—To prevent users from interacting with the DateTimePicker, you can render it in a disabled state until specific requirements are met.
  • Controlled mode—By using the controlled mode, you can manage the date value and the state of the popup in the DateTimePicker.
  • Default value—The DateTimePicker allows you to configure an initial value and the initial state of the popup.
  • Focused dates—The DateTimePicker enables you to change the default focused date.
  • Date and time limits—The DateTimePicker provides options for configuring a specific date limit that allows the user to select a date only within that predefined range.
  • Formats—You can control the date format for the DateTimePicker.
  • Placeholders—The DateTimePicker allows you to render a text hint and to provide descriptions for its date format sections.
  • Forms support—The forms allow you to validate input values, set validation requirements (such as minimum and maximum date) and prevent the submission of forms that are in an invalid state.
  • Integration with JSON—You can bind the DateTimePicker to dates that are serialized as strings.
  • Events—The DateTimePicker generates a variety of events that you can handle to further customize the behavior of the component.
  • Globalization—The DateTimePicker provides globalization features allowing you to create applications that can be used all over the world.
  • Keyboard navigation—The DateTimePicker supports numerous keyboard shortcuts that allow users to interact with the component.
  • Accessibility—The DateTimePicker is accessible for screen readers and provides full WAI-ARIA support.

In this article

Not finding the help you need?