ColorPicker

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

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",
            labelInline: true,
            label: "Choose your color"
        }
    ]
});

Attributes

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

type - (string) the type of a control, set it to "colorpicker"
id - (string) the id of a control, auto-generated if not set
value - (string) the value of a colorpicker
validation - (object|function) the rule of input validation. Can be set in two ways:
- as an object with validation rules listed below:
  - "" - empty
  - "email" - validEmail
  - "integer" - validInteger
  - "numeric" - validNumeric
  - "alphanumeric" - validAplhaNumeric
  - "IPv4" - validIPv4
- as a function that defines a custom validation rule. It takes as a parameter the value typed in the input and returns true, if the entered value is valid.
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
css - (string) adds custom CSS classes to ColorPicker
customColors - (array) shows a section with custom colors in the bottom part of the ColorPicker
grayShades - (boolean) defines whether the section with gray shades is displayed in the palette
palette - (array) contains arrays of colors you want to be shown in a colorpicker
paletteOnly - (boolean) defines whether ColorPicker is shown only the palette mode
pickerOnly - (boolean) defines whether ColorPicker is shown only the picker mode
width - (string) sets the width of ColorPicker