JavaScript/HTML Time Picker

Name: dhtmlxTimePicker - JavaScript time picker control
Rating: 4.8 (34 reviews)

A neat and handy JavaScript time picker control with simple customization. Part of the leading-edge Suite UI library.

Download

View more demos

Compatible with:

Product Features

Cross-browser compatibility
Easy customization
Full control with JavaScript API
Support for Angular, React, Vue.js

Ability to add new built-in controls
Validation of time values
12-hour and 24-hour format
Accessibility support

Simple HTML Time Picker Initialization

5 Quick Steps to Start Using Timepicker JS:

Create an HTML file

Include the time picker source code files in the header

Create a container and specify its id - "timepicker_container"

Initialize TimePicker with the dhx.Timepicker object constructor

Set the available configuration properties for the time format and action buttons

To learn more check documentation

Why Choose DHTMLX JavaScript Time Picker?

Easy timepicker js configuration

Timepicker js properties allow you to easily switch from the default 24-hour time format to the 12-hour format with AM/PM identifiers as well as apply the necessary locale. Besides, you can add buttons for saving and closing the timepicker control with the selected values, what comes in useful in a calendar app.

Flexible customization

Our JavaScript/HTML time picker is based on the slider control with broad configuration options like using horizontal or vertical slider modes, and customizing the time scale adding tooltips, setting steps, modifying intervals between time values, and aligning labels.

Values validation

dhtmlxTimepicker can be fully controlled due to its comprehensive JavaScript API. With the help of the API methods, it’s simple to set and modify or get the latest time values in the 12 or 24-hour format. The timepicker js validation makes it possible to type in only valid values.

Wrappers for Angular, React, and Vue.js

Our JavaScript time picker is included in the Suite UI library and can be used in Angular, React, or Vue.js-based apps due to special wrappers for these three popular frameworks. We invite you to download the Suite trial version and test the work of our components.

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: