Skip to main content


To initialize dhtmlxTimePicker on a page, you need to take the following simple steps:

<!DOCTYPE html><html>    <head>        <title>How to Start with dhtmlxTimePicker</title>                 <script type="text/javascript" src="../../codebase/suite.js"></script>        <link rel="stylesheet" href="../../codebase/suite.css">    </head>    <body>        <div id="timepicker_container"></div>        <script>            // creating dhtmlxTimePicker             var timepicker = new dhx.Timepicker("timepicker_container", {                // config options            });        </script>    </body></html>

Related sample: Timepicker. Basic Initialization

Include source files#

Create an HTML file and place full paths to JS and CSS files of the dhtmlxSuite library into the header of the file. The files are:

  • suite.js
  • suite.css
<script type="text/javascript" src="../../codebase/suite.js"></script><link rel="stylesheet" href="../../codebase/suite.css">

Create container#

Add a container for TimePicker and give it an id, for example "timepicker_container":

<div id="timepicker_container"></div>

Initialize TimePicker#

Initialize TimePicker with the dhx.Timepicker object constructor. The constructor has two parameters:

  • the HTML container for TimePicker,
  • optional, an object with configuration properties. If this argument is not passed to the constructor, the settings will be default.
// creating dhtmlxTimePickervar timepicker = new dhx.Timepicker("timepicker_container", {    // config options});

Configuration properties#

There is a set of properties you can specify for TimePicker to optimize its configuration for your needs.

The detailed information on TimePicker configuration options can be found in the TimePicker API overview article.

Set initial value (optional)#

You can set initial value for TimePicker using the setValue() method. It takes as a parameter the value to be set as a object Date, a string, or an array. Check details in the API reference.

// set the value as a stringtimepicker.setValue("00:39");// set the value as a Date objecttimepicker.setValue(new Date('January 10, 2019 17:54:00'));// set the value as an arraytimepicker.setValue([6,20,"AM"]);