React TimePicker

Overview

The React TimePicker provides an intuitive interface for entering or selecting any time of day. With several configuration options to help the component fit into any combination of UX requirements, the component is a versatile option for handling time inputs.

See React TimePicker Overview demo

React TimePicker - Overview, KendoReact UI Library

Disabled TimePicker

By default, the KendoReact TimePicker is enabled. However, there may be requirements where the TimePicker has to be disabled to prevent user interactions until certain requirements have been met. Luckily, enabling or disabling the KendoReact TimePicker can be toggled with a single configuration option.

See React TimePicker Disabled demo

React TimePicker - Disabled, KendoReact UI Library

Default Value

Out of the box, the React TimePicker loads with an empty input. However, setting an initial and default value is as easy as binding to a single configuration option and letting the component load with an initial value.

See React TimePicker Default Value demo

React TimePicker - Default Value, KendoReact UI Library

Time Limits

For scenarios that need to limit the time slots that the KendoReact TimePicker offers to users, there are min and max configuration options to help limit the range of time slots available.

See React TimePicker Time Limits demo

React TimePicker - Time Limits, KendoReact UI Library

Formats

Time can be displayed in many formats, including the initial scenario most of us think about: 12-hour or 24-hour clocks. Beyond this, the React TimePicker can handle any time of format string to define how time is displayed in its input, including being able to add in additional information from the date value it is bound to.

See React TimePicker Formats demo

React TimePicker - Formats, KendoReact UI Library

Placeholders

Having several different types of input elements on a page can be confusing to the end user. Having the ability to add in a placeholder into the KendoReact TimePicker component allows developers to give users a clear indication of what the component is representing and how they should interact with the component.

See React TimePicker Placeholders demo

React TimePicker - Placeholders, KendoReact UI Library

Forms Support

Thanks to features like custom validation messages and validation requirements like minimum, maximum and required properties, the KendoReact TimePicker component can easily integrate into any standard HTML form element, any third-party React form library or the KendoReact Form component.

See React TimePicker Forms Support demo

React TimePicker - Forms Support, KendoReact UI Library

Globalization

For scenarios that require either multiple different locales to be available, the React TimePicker component can easily be updated to handle time in the most intuitive way for every user—no matter their location and language preference. Beyond formatting, any built-in strings can easily be updated to display content appropriate for each user’s locale.

See React TimePicker Globalization demo

React TimePicker - Globalization, KendoReact UI Library

Controlled and Uncontrolled Modes

By default, the KendoReact TimePicker is in an uncontrolled state, meaning that the form data tied to the component is handled by the DOM itself. However, making the KendoReact TimePicker work in a controlled mode, when the form data is handled by the React component itself, can easily be done by just defining the date value of the component.

See React TimePicker Controlled and Uncontrolled Modes demo

Keyboard Navigation

Thanks to keyboard navigation, the KendoReact TimePicker can be navigated through using just the keyboard. This includes opening the popup and selecting a particular time, as well as updating the value of what has been selected using just a keyboard.

See React TimePicker Keyboard Navigation demo

Accessibility

Accessibility is an important part of KendoReact, and the React TimePicker is certainly no exception. In this vein, the KendoReact TimePicker supports Section 508 and WAI-ARIA standards, and has a AAA rating with WCAG 2.0.

See React TimePicker Accessibility demo

React TimePicker - Accessibility, KendoReact UI Library

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.