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 DhxForm Inputs

Related sample:  Form. TimePicker

Adding TimePicker

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

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

Attributes

You can provide the following attributes in the configuration object of a TimePicker:

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:

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

List of the control methods:

clear clears the value of a TimePicker control
clearValidate clears validation of a TimePicker control
disable disables a TimePicker control on a page
enable enables a disabled TimePicker control
focus sets focus to a control
getProperties returns an object with the available configuration attributes of the control
getValue returns the current value of a TimePicker control
getWidget returns the dhtmlxTimePicker widget attached to a TimePicker control
hide hides a TimePicker control
isDisabled checks whether a TimePicker control is disabled
isVisible checks whether a TimePicker control is visible on the page
setProperties allows changing available configuration attributes of the control dynamically
setValue sets the value for a TimePicker control
show shows a TimePicker control on the page
validate validates a TimePicker control

List of the control events:

afterChangeProperties fires after configuration attributes of the control have been changed dynamically
afterHide fires after a control is hidden
afterShow fires after a control is shown
afterValidate fires after the control value is validated
beforeChangeProperties fires before configuration attributes of the control are changed dynamically
beforeHide fires before a control is hidden
beforeShow fires before a control is shown
beforeValidate fires before the control value is validated
change fires on changing the value of a control
input fires when a user enters the value of a control in the input manually

Working with the dhtmlxTimePicker widget

There is a possibility to use methods of dhtmlxTimePicker 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.

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

Related sample:  Form. Get Widget Of Control

Back to top