To initialize DHTMLX TimePicker on a page, you need to take the following simple steps:
<!DOCTYPE html>
<html>
<head>
<title>How to Start with DHTMLX TimePicker</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>
const timepicker = new dhx.Timepicker("timepicker_container", {
});
</script>
</body>
</html>
Unpack the downloaded package into a folder of your project.
After that, 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.js
const timepicker = new dhx.Timepicker("timepicker_container", {
});
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 before initialization of the component via the value configuration option:
const timepicker = new dhx.Timepicker("timepicker_container", {
controls: true,
css: "dhx_widget--bordered",
value: new Date,
});
If you need to set a specific value after initialization of TimePicker, use the setValue() method:
timepicker.setValue("00:39");
timepicker.setValue(new Date('January 10, 2019 17:54:00'));
timepicker.setValue([6,20,"AM"]);
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4