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:  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",
            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
  • editable - (boolean) allows a user to enter the value of the control manually
  • 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)
  • hidden - (boolean) defines whether a control is hidden
  • label - (string) specifies a label for a control
  • labelWidth - (string|number) 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
  • labelPosition - (string) defines the position of a label: "left"|"top"
  • name - (string) the name of a control
  • required - (boolean) defines whether a control is required
  • helpMessage - (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
  • controls - (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
  • disable() - disables a TimePicker control on a page
  • enable() - enables a disabled TimePicker control
  • getValue(): string - returns the current string value of a TimePicker control
  • getWidget(): object - returns the dhtmlxTimePicker widget attached to a TimePicker control
  • hide() - hides a TimePicker control
  • isDisabled(): boolean - checks whether a TimePicker control is disabled
  • setValue(value: Date|string) - sets the value as a Date|string for a TimePicker control
  • show() - shows a TimePicker control on the page
  • 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:  Form. Get Widget Of Control

Back to top