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
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:
<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">
Add a container for TimePicker and give it an id, for example "timepicker_container":
index.html
<div id="timepicker_container"></div>
Initialize TimePicker with the dhx.Timepicker
object constructor. The constructor has two parameters:
index.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.
You can specify the following properties in the configuration object of TimePicker:
controls | defines whether a timepicker is equipped with the Close and Save buttons |
css | adds style classes for the component |
timeFormat | defines what clock format is activated: the 12-hour or 24-hour one |
value | the time value to be set on initialization of the timepicker |
valueFormat | defines the format of the value to be applied when working with TimePicker events |
The detailed information on configuration options can be found in the Configuration article.
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"]);
Back to top