Skip to main content

TimePicker

A control that allows a user to select time value either by moving handles along track bars or by entering hour and minutes values directly into related inputs.

TimePicker

Related sample: Form. All controls

Related sample: Form. TimePicker

Adding TimePicker​

You can easily add a TimePicker control during initialization of a form:

const form = new dhx.Form("form_container", {
    rows: [
        {
            type: "timepicker",
            name: "timepicker",
            label: "time",
            labelWidth: "50px",
            timeFormat: 12,
            valueFormat: "timeObject",
            value: [6,20,"AM"]
        }
    ]
});

Properties​

View the full list of configuration properties of the TimePicker control.

Working with TimePicker​

You can manipulate a TimePicker control by using methods or events of the object returned by the getItem() method.

For example, you can get the value of the control:

const value = form.getItem("timepicker").getValue();

Methods:​

Check the full list of methods of the Timepicker control.

Events:​

Check the full list of events of the Timepicker control.

Working with the dhtmlxTimePicker widget​

There is a possibility to use methods of DHTMLX TimePicker via the getWidget() method of a TimePicker control.

For example, you can set value for a TimePicker control. To do this, you need to get the widget attached to the TimePicker control and then use the setValue() method of this widget.

const timepicker = form.getItem("timepicker").getWidget();  // -> TimePicker
timepicker.setValue("00:39"); //set the value as a string

Related sample: Form. Get widget of control

Check the full list of methods of the DHTMLX Timepicker component which you can apply via the getWidget() method.