ColorPicker

An input with a color picker attached to it for selecting a color.

ColorPicker

Related sample:  Form. All DhxForm Inputs

Related sample:  Form. ColorPicker

Adding ColorPicker

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

var form = new dhx.Form("form_container", {
    rows: [
        {
            type: "colorpicker",
            name: "colorpicker",
            labelWidth: "200px",
            label: "Choose your color"
        }
    ]
});

Attributes

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

Working with ColorPicker

You can manipulate a ColorPicker 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("colorpicker").getValue();

Related sample:  Form. Get Item

List of the control methods:

clear clears a value of a ColorPicker control
clearValidate clears validation of a ColorPicker control
disable disables a ColorPicker control on a page
enable enables a disabled ColorPicker 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 ColorPicker control (in the Hex format)
getWidget returns the dhtmlxColorPicker widget attached to a ColorPicker control
hide hides a ColorPicker control
isDisabled checks whether a ColorPicker control is disabled
isVisible checks whether a ColorPicker control is visible on the page
setProperties allows changing available configuration attributes of the control dynamically
setValue sets the value as a string (in the Hex format) for a ColorPicker control
show shows a ColorPicker control on the page
validate validates a ColorPicker 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 dhtmlxColorPicker widget

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

For example, you can set focus on the specified value in the control. To do this, you need to get the widget attached to the ColorPicker control and then use the setFocus() method of this widget.

var colorpicker = form.getItem("colorpicker").getWidget();  // -> ColorPicker
colorpicker.setFocus("#BDF0E9"); // sets focus on the "#BDF0E9" color

Related sample:  Form. Get Widget Of Control

Back to top