ejColorPicker

31 Jan 201924 minutes to read

The ColorPicker control provides you a rich visual interface for color selection. You can select the color from the professionally designed palettes or custom color. By clicking a point on the color, you can change the active color to the color that is located under the pointer.

Syntax

  • JAVASCRIPT
  • $(element).ejColorPicker(options)
    Name Type Description
    options object settings for color picker

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            </script>

    Requires

    • module:jQuery

    • module:ej.core.js

    • module:ej.colorpicker.js

    • module:ej.button.js

    • module:ej.splitbutton.js

    • module:ej.menu.js

    • module:ej.slider.js

    NOTE

    jQuery.easing external dependency has been removed from version 14.3.0.49 onwards. Kindly include this jQuery.easing dependency for versions lesser than 14.3.0.49 in order to support animation effects.

    Members

    buttonText object

    The ColorPicker control allows to define the customized text to displayed in button elements. Using the property to achieve the customized culture values.

    Default Value

    • { apply: “Apply”, cancel: “Cancel”, swatches: “Swatches” }

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set buttonText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   buttonText: {apply: "Set", cancel: "Close" }});
            </script>

    buttonText.apply string

    Sets the text for the apply button.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set buttonText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   buttonText: {apply: "select"}});
            </script>

    buttonText.cancel string

    Sets the text for the cancel button.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set buttonText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   buttonText: {cancel: "Exit" }});
            </script>

    buttonText.swatches string

    Sets the header text for the swatches area.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set buttonText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   buttonText: {swatches: "colors"}});
            </script>

    buttonMode enum|string

    Allows to change the mode of the button. Please refer below to know available button mode

    Name Description
    Split Displays the button in split mode
    Dropdown Displays the button in Dropdown mode

    Default Value

    • ej.ButtonMode.Split

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set buttonText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",  buttonMode: ej.ButtonMode.Dropdown});
            </script>

    columns number|string

    Specifies the number of columns to be displayed color palette model.

    Default Value

    • 10

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set columns API during initialization  
            $('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", columns: 5});
            </script>

    cssClass string

    This property allows you to customize its appearance using user-defined CSS and custom skin options such as colors and backgrounds.

    Default Value

    • ””

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set cssClass API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",  cssClass : "gradient-lime"});
            </script>

    custom array

    This property allows to define the custom colors in the palette model.Custom palettes are created by passing a comma delimited string of HEX values or an array of colors.

    Default Value

    • empty

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set custom API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", palette: "custompalette", custom: ["ffffff", "ffccff", "ff99ff", "ff66ff", "ff33ff", "ff00ff", "ccffff", "ccccff"]});
            </script>

    displayInline boolean

    This property allows to embed the popup in the order of DOM element flow . When we set the value as true, the color picker popup is always in visible state.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set displayInline API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",  displayInline: true});
            </script>

    enabled boolean

    This property allows to change the control in enabled or disabled state.

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set enabled API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",  enabled: false});
            </script>

    enableOpacity boolean

    This property allows to enable or disable the opacity slider in the color picker control

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set enableOpacity API during initialization  
            $('#colorPicker').ejColorPicker({ value: "#278787", enableOpacity: false });
            </script>

    htmlAttributes object

    It allows to define the characteristics of the ColorPicker control. It will helps to extend the capability of an HTML element.

    Default Value

    • {}

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Set HtmlAttributes to Button on initialization. 
                    $('#colorPicker').ejColorPicker({ htmlAttributes : {disabled:"disabled"}});       
            </script>

    locale string

    Defines the localized text values in button and tooltip.

    Default Value

    • “en-US”

    Example

  • HTML
  • <input type="text" id="colorpicker" />
    <script>
    // Set the locale value during initialization.                  
            $("#colorpicker").ejColorPicker({ value: "#278787",  locale : "zh-CN" });
    
            ej.ColorPicker.Locale["zh-CN"] = {
                buttonText: {
                    apply: "应用",
                    cancel: "取消",
                    swatches: "色板"
                },
                tooltipText: {
                    switcher: "切换器",
                    addButton: "添加颜色",
                    basic: "基本",
                    monoChrome: "单色铬",
                    flatColors: "平的颜色",
                    seaWolf: "海狼",
                    webColors: "网颜色",
                    sandy: "沙",
                    pinkShades: "桃红色树荫",
                    misty: "蒙蒙",
                    citrus: "柑橘",
                    vintage: "葡萄酒",
                    moonLight: "月光",
                    candyCrush: "糖果粉碎",
                    currentColor: "当前颜色",
                    selectedColor: "所选颜色"
                }
            };
    </script>

    modelType enum|string

    Specifies the model type to be rendered initially in the color picker control. See below to get available ModelType

    Name Description
    Palette support palette type mode in color picker.
    Picker support palette type mode in color picker.

    Default Value

    • ej.ColorPicker.ModelType.Default

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set modelType API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette"});
            </script>

    opacityValue number|string

    This property allows to change the opacity value .The selected color opacity will be adjusted by using this opacity value.

    Default Value

    • 100

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set opacityValue API during initialization  
            $('#colorPicker').ejColorPicker({ value: "#278787", opacityValue: 20 });
            </script>

    palette enum|string

    Specifies the palette type to be displayed at initial time in palette model.There two types of palette model available in ColorPicker control. See below available Palette

    Name Description
    BasicPalette used to show the basic palette
    CustomPalette used to show the custompalette

    Default Value

    • ej.ColorPicker.Palette.BasicPalette

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set palette API during initialization 
            $('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", palette: "basicpalette"});
            </script>

    presetType enum|string

    This property allows to define the preset model to be rendered initially in palette type.It consists of 12 different types of presets. Each presets have 50 colors. See below available Presets

    Name Description
    Basic used to show the basic presets
    CandyCrush used to show the CandyCrush colors presets
    Citrus used to show the Citrus colors presets
    FlatColors used to show the FlatColors presets
    Misty used to show the Misty presets
    MoonLight used to show the MoonLight presets
    PinkShades used to show the PinkShades presets
    Sandy used to show the Sandy presets
    SeaWolf used to show the Seawolf presets
    Vintage used to show the Vintage presets
    WebColors used to show the WebColors presets

    Default Value

    • ej.ColorPicker.Presets.Basic

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set presetType API during initialization 
            $('#colorPicker').ejColorPicker({ value: "#278787", modelType: "palette", presetType: "vintage"});
            </script>

    showApplyCancel boolean

    Allows to show/hides the apply and cancel buttons in ColorPicker control

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showApplyCancel API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", showApplyCancel: false});
            </script>

    showClearButton boolean

    Allows to show/hides the clear button in ColorPicker control

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showClearButton API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", showClearButton: false});
            </script>

    showPreview boolean

    This property allows to provides live preview support for current cursor selection color and selected color.

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showPreview API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", showPreview: false});
            </script>

    showRecentColors boolean

    This property allows to store the color values in custom list.The ColorPicker will keep up to 11 colors in a custom list.By clicking the add button, the selected color from picker or palette will get added in the recent color list.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showRecentColors API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   showRecentColors: true});
            </script>

    showSwitcher boolean

    Allows to show/hides the switcher button in ColorPicker control.It helps to switch palette or picker mode in colorpicker.

    Default Value

    • true

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showSwitcher API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", showSwitcher: false});
            </script>

    showTooltip boolean

    This property allows to shows tooltip to notify the slider value in color picker control.

    Default Value

    • false

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set showTooltip API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787", showTooltip: true});
            </script>

    toolIcon string

    Specifies the toolIcon to be displayed in dropdown control color area.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set toolIcon API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",  toolIcon: "e-fontcolor-icon"});
            </script>
            <style>
            .e-colorwidget .e-tool .e-fontcolor-icon:before
            {
            content: "\e632";
            margin-top: 9px;
            font-size: 10px;
            margin-left: 5px;
            }
            </style>

    tooltipText object

    This property allows to define the customized text or content to displayed when mouse over the following elements. This property also allows to use the culture values.

    Default Value

    • { switcher: “Switcher”, addButton: “Add Color”, basic: “Basic”, monoChrome: “Mono Chrome”, flatColors: “Flat Color”, seaWolf: “Sea Wolf”, webColors: “Web Colors”, sandy: “Sandy”, pinkShades: “Pink Shades”, misty: “Misty”, citrus: “Citrus”, vintage: “Vintage”, moonLight: “Moon Light”, candyCrush: “Candy Crush”, currentColor: “Current Color”, selectedColor: “Selected Color” }

    tooltipText.switcher string

    Sets the tooltip text for the switcher button.

    tooltipText.addButton string

    Sets the tooltip text for the add button.

    tooltipText.basic string

    Sets the tooltip text for the basic preset.

    tooltipText.monoChrome string

    Sets the tooltip text for the mono chrome preset.

    tooltipText.flatColors string

    Sets the tooltip text for the flat colors preset.

    tooltipText.seaWolf string

    Sets the tooltip text for the sea wolf preset.

    tooltipText.webColors string

    Sets the tooltip text for the web colors preset.

    tooltipText.sandy string

    Sets the tooltip text for the sandy preset.

    tooltipText.pinkShades string

    Sets the tooltip text for the pink shades preset.

    tooltipText.misty string

    Sets the tooltip text for the misty preset.

    tooltipText.citrus string

    Sets the tooltip text for the citrus preset.

    tooltipText.vintage string

    Sets the tooltip text for the vintage preset.

    tooltipText.moonLight string

    Sets the tooltip text for the moon light preset.

    tooltipText.candyCrush string

    Sets the tooltip text for the candy crush preset.

    tooltipText.currentColor string

    Sets the tooltip text for the current color area.

    tooltipText.selectedColor string

    Sets the tooltip text for the selected color area.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set tooltipText API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787",   tooltipText: { switcher: "Switch",  currentColor: "New Color", selectedColor: "Old Color" }});
            </script>

    value string

    Specifies the color value for color picker control, the value is in hexadecimal form with prefix of “#”.

    Default Value

    • null

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //To set value API during initialization
            $('#colorPicker').ejColorPicker({ value: "#278787"});
            </script>

    Methods

    disable()

    Disables the color picker control

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.disable(); // disables the colorPicker
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // disables the colorPicker
            $("#colorPicker").ejColorPicker("disable");
            </script>

    enable()

    Enable the color picker control

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.enable(); // enables the colorPicker
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // enable the colorPicker
            $("#colorPicker").ejColorPicker("enable");
            </script>

    getColor()

    Gets the selected color in RGB format

    ####Returns
    object

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.getColor(); // gets the selected color in RGB format
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // gets the selected color in RGB format
            var color=$("#colorPicker").ejColorPicker("getColor");
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>

    getValue()

    Gets the selected color value as string

    ####Returns

    string

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            alert(colorObj.getValue()); // gets the selected color value as string
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // gets the selected color value as string
            alert($("#colorPicker").ejColorPicker("getValue"));
            </script>

    hexCodeToRGB(colorCode)

    To Convert color value from hexCode to RGB

    ####Returns

    object

    Name Type Description
    colorCode string Specified HEX code converted to RGB

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.hexCodeToRGB("#278787"); // Convert color value from hexCode to RGB
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Convert color value from hexCode to RGB
            var color=$("#colorPicker").ejColorPicker("hexCodeToRGB","#278787");
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>

    hide()

    Hides the ColorPicker popup, if in opened state.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.hide(); // hide the ColorPicker popup
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // hide the ColorPicker popup
            $("#colorPicker").ejColorPicker("hide");
            </script>

    HSVToRGB(HSV)

    Convert color value from HSV to RGB

    ####Returns

    object

    Name Type Description
    HSV object Specified HSV code converted to RGB

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.HSVToRGB({h:230,s:98,v:98}); // Convert color value from HSV to RGB
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Convert color value from HSV to RGB        
            var color=$("#colorPicker").ejColorPicker("HSVToRGB","{h:230,s:98,v:98}");
            alert("Red="+color.r+", Green="+color.g+", Blue="+color.b);
            </script>

    RGBToHEX(rgb)

    Convert color value from RGB to HEX

    ####Returns

    string

    Name Type Description
    RGB object Specified RGB code converted to HEX code

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            alert(colorObj.RGBToHEX(colorObj.getColor())); // Convert color value from RGB to HEX
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            // Convert color value from RGB to HEX
            alert($("#colorPicker").ejColorPicker("RGBToHEX",colorObj.getColor()));
            </script>

    RGBToHSV(rgb)

    Convert color value from RGB to HSV

    ####Returns

    object

    Name Type Description
    RGB object Specified RGB code converted to HSV code

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            var color=colorObj.RGBToHSV({r:39,g:135,b:135}); // Convert color value from RGB to HSV
            alert("H="+color.r+", S="+color.g+", V="+color.b);
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Convert color value from RGB to HSV        
            var color=$("#colorPicker").ejColorPicker("RGBToHSV","{r:39,g:135,b:125}");
            alert("H="+color.r+", S="+color.g+", V="+color.b);
            </script>

    show()

    Open the ColorPicker popup.

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // Create ColorPicker instance
            var colorObj = $("#colorPicker").data("ejColorPicker");
            colorObj.show(); // open the ColorPicker popup
            </script>
  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            // Create Color picker
            $('#colorPicker').ejColorPicker({ value: "#278787" });
            // open the ColorPicker popup
            $("#colorPicker").ejColorPicker("show");
            </script>

    Events

    change

    Fires after Color value has been changed successfully.If the user want to perform any operation after the color value changed then the user can make use of this change event.

    </tr>
    Name Type Description
    changeFrom string return the previous color value
    model object returns the color picker model
    type string returns the name of the event
    value string return the changed color value

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //change event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            change: function (args) {
            // Write a code block to perform operation after changing the color.
            }
            });
            </script>

    close

    Fires after closing the color picker popup.

    Name Type Description
    model object returns the color picker model
    type string returns the name of the event

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //close event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            close: function (args) {
            // Write a code block to perform operation after closing the color picker popup.
            }
            });
            </script>

    create

    Fires after Color picker control is created. If the user want to perform any operation after the color picker control creation then the user can make use of this create event.

    Name Type Description
    model object returns the color picker model
    type string returns the name of the event

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //create event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            create: function (args) {
            // Write a code block to perform operation after creating the color picker.
            }
            });
            </script>

    destroy

    Fires after Color picker control is destroyed. If the user want to perform any operation after the color picker control destroyed then the user can make use of this destroy event.

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the color picker model
    type string returns the name of the event

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //create event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            destroy: function (args) {
            // Write a code block to perform operation after creating the color picker.
            }
            });
            </script>

    open

    Fires after opening the color picker popup

    Name Type Description
    model object returns the color picker model
    type string returns the name of the event

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //open event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            open: function (args) {
            // Write a code block to perform operation after opening the color picker popup.
            }
            });
            </script>

    select

    Fires after Color value has been selected successfully. If the user want to perform any operation after the color value selected then the user can make use of this select event.

    Name Type Description
    model object returns the color picker model
    type string returns the name of the event
    value string return the selected color value

    Example

  • HTML
  • <input type="text" id="colorPicker"/> 
            
            <script>
            //select event for color picker
            $('#colorPicker').ejColorPicker({              
            value: "#278787", 
            select: function (args) {
            // Write a code block to perform operation after selecting the color.
            }
            });
            </script>