KendoReact TimePicker Overview

The KendoReact TimePicker represents a time-list where the user can enter or pick time values.

The following example demonstrates the TimePicker in action.

View Source
Change Theme:

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

Key Features

  • Disabled TimePickerTo prevent users from interacting with the TimePicker, you can render it in a disabled state until specific requirements are met.
  • Controlled TimePickerBy using the controlled mode, you can manage the value and the state of the popup in the TimePicker.
  • Default valueThe TimePicker allows you to configure an initial value and the initial state of the popup.
  • Time limitsThe TimePicker provides options for configuring a specific time limit that allows the user to select a time only within that predefined range.
  • Incremental stepsYou can adjust the default step for increasing and decreasing the time values.
  • FormatsThe TimePicker allows you to control the time format.
  • Placeholders You can render a text hint for the TimePicker's input field and provide descriptions for the format sections.
  • Forms supportYou can easily integrate the TimePicker with the KendoReact Form component, set validation requirements, and prevent the submission of invalid forms.
  • Custom renderingThe TimePicker allows you to customize its rendering and transform the appearance of its child components.
  • Integration with JSONYou can bind the TimePicker to dates that are serialized as strings.
  • EventsYou can further tailor the behavior of the TimePicker to your specific requirements by handling its events.
  • GlobalizationThe TimePicker provides globalization features allowing you to create applications that can be used all over the world.
  • Keyboard navigationThe TimePicker supports numerous keyboard shortcuts that allow users to interact with the component.
  • AccessibilityThe TimePicker is accessible for screen readers and provides full WAI-ARIA support.

In this article

Not finding the help you need?