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.


Related sample:  All dhxForm inputs - DHTMLX Form

Adding TimePicker

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

var form = new dhx.Form("form_container", {
    rows: [
            type: "timepicker",
            label: "time",
            labelInline: true,
            labelWidth: "50px"


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

  • type - (string) the type of a control, set it to "timepicker"
  • id - (string) the id of a control, auto-generated if not set
  • value - (string) the initial value of TimePicker
  • validation - (function) the validation function, takes as a parameter the value to validate and returns true/false to indicate the result of validation
  • icon - (string) the name of an icon from the used icon font
  • placeholder - (string) a tip for the input
  • editing - (boolean) allows a user to enter the value of the control manually

  • parent - (string) the id of the parent control
  • width - (string) the width of a control
  • height - (string) the height of a control
  • css - (string) adds style classes to a control
  • disabled - (boolean) defines whether a control is enabled (false) or disabled (true)
  • label - (string) specifies a label for a control
  • labelWidth - (string) sets the width of the label of a control
  • hiddenLabel - (boolean) invisible label that will be used to identify the input on the server side
  • labelInline - (boolean) defines the position of a label: true - to set a label inline with a control
  • name - (string) the name of a control
  • required - (boolean) defines whether a control is required
  • help - (string) adds a help message to a control
  • preMessage - (string) a message that contains instructions for interacting with the control
  • successMessage - (string) a message that appears in case of successful validation of the control value
  • errorMessage - (string) a message that appears in case of error during validation of the control value
  • gravity - (boolean) arranges form controls evenly throughout the container, depending on the direction of layout ("cols" or "rows"), true by default

  • timeFormat - (number) defines what clock format is activated: the 12-hour or 24-hour one. Set the property to 12 or 24 (default) value, correspondingly
  • actions - (boolean) defines whether a timepicker is equipped with the Close and Save buttons

Working with TimePicker

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

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

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

List of the control methods:

  • clear() - clears a value of a TimePicker control
  • clearValidate() - clears validation of a TimePicker control
  • getValue(): string - returns the current string value of a TimePicker control
  • getWidget(): object - returns the dhtmlxTimePicker widget attached to a TimePicker control
  • setValue(value: Date|string) - sets the value as a Date|string for a TimePicker control
  • setConfig(config: object) - sets a new configuration for a TimePicker control
  • validate(): boolean - validates a TimePicker control. Returns the result of validation: true, if a control is valid, otherwise - false

Working with the widget of TimePicker control

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_id").getWidget();  // -> TimePicker
timepicker.setValue("00:39"); //set the value as a string

Related sample:  Get widget of control - DHTMLX Form

Setting configuration of TimePicker control

It is possible to update the configuration of a TimePicker control on the fly with the help of the setConfig() method of the object returned by the getItem() method.

To do this, you need to get access to the object of the control by using the getItem() method of Form and pass a new configuration object as a parameter of the setConfig() method:

    actions: "true",
    label: "time",
    required: true,
    labelInline: true,
    labelWidth: "120px"

The setConfig() method of a control doesn't allow updating its id, type and name properties.

Back to top