React Time Picker Overview

Premium

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

The following example demonstrates the TimePicker in action.

Change Theme

Theme

Loading ...

The React Time Picker 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.

React Time Picker Key Features

• Disabled TimePicker—To prevent users from interacting with the TimePicker, you can render it in a disabled state until specific requirements are met.
• Controlled TimePicker—By using the controlled mode, you can manage both the selected value and the visibility of the popup through React state.
• Default value—The TimePicker allows you to configure an initial value and the initial state of the popup.
• Time limits—The TimePicker provides options for configuring a specific time limit that allows the user to select a time only within that predefined range.
• Incremental steps—You can adjust the default step for increasing and decreasing the time values.
• Formats—The 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 support—You can easily integrate the TimePicker with the KendoReact Form component, set validation requirements, and prevent the submission of invalid forms.
• Custom rendering—The TimePicker allows you to customize its rendering and transform the appearance of its child components.
• Integration with JSON—You can bind the TimePicker to dates that are serialized as strings.
• Events—You can further tailor the behavior of the TimePicker to your specific requirements by handling its events.
• Globalization—The TimePicker provides globalization features allowing you to create applications that can be used all over the world.
• Keyboard navigation—The TimePicker supports numerous keyboard shortcuts that allow users to interact with the component.
• Accessibility—The TimePicker is accessible for screen readers and provides full WAI-ARIA support.

Suggested Links

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