TimePicker

A control that allows users to select a time value: either move handles along track bars or enter hour and minute values directly in the related inputs.

Related sample: Form. All controls

Related sample: Form. TimePicker

Adding TimePicker

You can add a TimePicker control during form initialization:

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 TimePicker configuration properties.

Working with TimePicker

You can manage a TimePicker control with the methods and events of the object that the getItem() method returns.

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

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

Methods

Check the full list of TimePicker methods.

Events

Check the full list of TimePicker events.

Working with the dhtmlxTimePicker widget

You can use DHTMLX TimePicker methods with the getWidget() method of a TimePicker control.

For example, to set a value for a TimePicker control, get the widget attached to it and call its setValue() method.

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 DHTMLX TimePicker methods that you can apply with the getWidget() method.