React TimePicker

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

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

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

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

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

The KendoReact TimePicker supports an adaptive mode that provides a mobile-friendly rendering of its calendar popup. When enabled, the component will automatically adapt to the current screen size and will change its rendering accordingly.  

See the React TimePicker Adaptive Rendering demo

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

The React TimePicker supports adding floating labels as part of its input. This feature displays an initial message within the component, which then floats outside the component when the user enters the input. The floating label is then replaced by the mask of the component, ensuring that users are aware of the content format they should adhere to.

See React TimePicker Floating Label demo

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

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

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

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 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