React Time Picker Component

Name: React Time Picker Component | DHTMLX
Rating: 4.7 (52 reviews)

Convenient React time picker with flexible formats, intuitive controls, and rich customization for forms, scheduling, and Suite UI workflows.

Download

View more demos

Compatible with:

Vue.js

JavaScript

Angular

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

Check the demo on Github

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: