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

JavaScript/HTML Time Picker

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

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

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:

Other Suite Components


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

Try All UI Widgets for Free

All JavaScript UI widgets are part of the DHTMLX Suite library. You can download a free trial version and benefit from:

30 days of free evaluation

Official technical support

Full toolkit of 23 components

PRO features

Need help with dhtmlxTimePicker integration into your app? Contact us