< DHTMLX Suite 8.3: Colorpicker Transparency Scale, Extended Functionality of Columns’ Header and Footer in Grid/TreeGrid, and More

React Time Picker

A convenient React time picker component with wide customization capabilities.
An essential widget is available in the advanced Suite UI library.

Product Features

  • Cross-browser compatibility
  • IE11+ support
  • Easy customization
  • Full control with JavaScript API
  • Accessibility support
  • Ability to add new built-in controls
  • Validation of time values
  • 12-hour and 24-hour format
  • Support for Angular, React, Vue.js

Simple React Time Picker Initialization

Follow These Simple Instructions to Initialize TimePicker React:
Create a TimePicker.js file and import files and styles of TimePicker
Create TimePicker class, which extends the Component class
Add an empty container for TimePicker with the reference to it in the el property using the ref property
When the component is initialized, initialize TimePicker and attach the instance of Calendar to the container with the reference to it in the el property
Specify a set of configuration properties if needed

Why Choose React Time Picker?

Smooth configuration
React js time picker allows selecting time in both 12h and 24h clock format, applying AM or PM identifiers and specific location. The default component doesn’t have any buttons, however, you can add controls for saving and closing the timepicker widget with the values chosen for hours and minutes.
Versatile customization
TimePicker is built on Slider and Layout controls and works smoothly as a part of any DHTMLX-based app. This Suite UI library component provides extensive customization options allowing developers to apply horizontal or vertical slider mode, arrange labels, add tooltips while scrolling the timeline. Changes related to look and feel can be made via CSS.
Values flexibility
You can control dhtmlxTimePicker with the help of the related API methods. Change the value of the React time picker component or get current numbers. Set up requested time validation thus enabling end-users to enter only valid values in the 12-hour or 24-hour format, configure steps and modify intervals between time values.
Angular and Vue.js wrappers
DHTMLX TimePicker widget can be also integrated into applications based on Angular or Vue.js frameworks by using specially developed wrappers. Download a30-day trial version of the leading-edge Suite UI library for free. Look how it works and receive official support from our team.

Support & Learning Resources

We provide comprehensive documentation with technical samples. Moreover, our dedicated support team is fast and qualified. Find the suitable way to get support:

Other Suite Components


File manager built with the help of Suite components: Layout, Grid, DataView, Toolbar, etc.

Try All UI Components for Free

All UI components for React are part of the dhtmlxSuite library. You can download the free trial version of Suite andbenefit from:

30 days of free evaluation

Official technical support

Full toolkit of 21 components

Compatibility with React, Angular, and Vue.js

Need help with dhtmlxTimePicker integration into your app? Contact us