Initialization

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

Download the TimePicker package and unpack it into a folder of your project
Include source files
Create a container
Initialize TimePicker with the object constructor
Set initial value (optional)

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

Include source files

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

timepicker.js
timepicker.css

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

The structure of the TimePicker package is the following:

sources - the source code files of the library; they are easy-to-read and are mostly intended for debugging;
codebase - the obfuscated code files of the library; they are much smaller and intended for use in production. Include these files in your apps when they are ready;
samples - the code samples;
docs - the full documentation of the component.

Create container

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

timepicker.html

<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 (see the full list below). If this argument is not passed to the constructor, the settings will be default.

timepicker.html

// creating dhtmlxTimePicker
var timepicker = new dhx.Timepicker("timepicker_container", {
    // config options
});

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

Configuration properties

You can specify the following properties in the configuration object of TimePicker:

timeFormat - (boolean) defines what clock format is activated: the 12-hour or 24-hour one
actions - (boolean) defines whether a timepicker is equipped with the Close and Save buttons
css - (string) adds style classes for the component

The detailed information on configuration options can be found in the Configuration 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 string
timepicker.setValue("00:39");
// set the value as a Date object
timepicker.setValue(new Date('January 10, 2019 17:54:00'));
// set the value as an array
timepicker.setValue([6,20,"AM"]);