Initialization

info

Download the DHTMLX Colorpicker package as part of the DHTMLX Suite library

You can initialize DHTMLX Colorpicker in two ways: inside a container or inside a popup.

To create DHTMLX Colorpicker on a page, follow these steps:

• Include source files
• Initialize Colorpicker with the object constructor
• Select the initial color (optional)

<!DOCTYPE html>
<html>
    <head>
        <title>How to start with DHTMLX ColorPicker</title>         
        <script type="text/javascript" src="../../codebase/suite.js"></script>
        <link rel="stylesheet" href="../../codebase/suite.css">
    </head>
    <body>
        <div id="colorpicker_container"></div>
        <script>
            // creating Colorpicker 
            const colorpicker = new dhx.Colorpicker("colorpicker_container", {
                // config options
            });
        </script>
    </body>
</html>

Include source files

Unpack the downloaded package into your project folder.

Create an HTML file and place full paths to the DHTMLX Suite JS and CSS files in its header. The files are:

• suite.js
• suite.css

index.html

<script type="text/javascript" src="../../codebase/suite.js"></script>
<link rel="stylesheet" href="../../codebase/suite.css">

Initialize Colorpicker

You can initialize Colorpicker in a container or in a popup.

Initialization in a container

In this case, add a container for Colorpicker and give the container an id, for example "colorpicker_container":

index.html

<div id="colorpicker_container"></div>

Initialize Colorpicker with the dhx.Colorpicker object constructor:

index.js

// creating ColorPicker
const colorpicker = new dhx.Colorpicker("colorpicker_container", {
    css: "dhx_widget--bordered",
   // more config options
});

Related sample: Colorpicker. Initialization

The constructor takes two parameters:

• The HTML container for Colorpicker.
• An object with configuration properties (see the full list below). If you omit this argument, Colorpicker uses default settings.

Initialization in a popup

In this case, you create a popup first and then attach Colorpicker to it.

• Use the object constructors to create the Colorpicker and Popup objects. Pass null instead of a container for Colorpicker:

const colorpicker = new dhx.Colorpicker(null, { customColors: ["#f2f2f2"] });
const popup = new dhx.Popup();

• Attach Colorpicker to the popup with the attach() method of Popup:

popup.attach(colorpicker);

• Use the show() and hide() methods of Popup to show and hide the popup with Colorpicker. For example:

popup.show("showButton");

const colorExample = document.querySelector(".dhx_color-sample");
colorpicker.events.on("colorChange", function (color) {
    colorExample.style.backgroundColor = color;
    popup.hide();
});

Related sample: Colorpicker. Colorpicker inside Popup

Configuration properties

The Colorpicker API overview article describes Colorpicker configuration options in detail.

Select initial color (optional)

Use the setValue() method to select a color in the palette after Colorpicker initialization:

const colorpicker = new dhx.Colorpicker("colorpicker_container", {
   // config options
});
colorpicker.setValue("#BDF0E9");

Related sample: Colorpicker. Set value