Le’ts add a color picker to textbox through system.xml file located at
app\code\Vendor\Extension\etc\adminhtml

<system>
	<section>
    	<group id="my_color_group" ...>
        	<field id="my_color_option" translate="label" type="text" sortOrder="10" showInDefault="1" showInWebsite="1" showInStore="1">
                <label>Background Color</label>
                <comment><![CDATA[Background color]]></comment>
                <frontend_model>Vendor\Extension\Block\Color</frontend_model>                     
            </field>
    	</group>
	</section>
</system>

<label>Background Color</label>

<frontend_model>Vendor\Extension\Block\Color</frontend_model>

</field>

</group>

</section>

</system>

Now we have to create one Color.php file at below location under the hood of extension
app\code\Vendor\Extension\Block

<?php
namespace Vendor\Extension\Block; 
class Color extends \Magento\Config\Block\System\Config\Form\Field { 
	public function __construct(
    \Magento\Backend\Block\Template\Context $context, array $data = []
	) {
        parent::__construct($context, $data);
	}
 
	protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {
    	$html = $element->getElementHtml();
    	$value = $element->getData('value');
 
    	$html .= '<script type="text/javascript">
            require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {
                $(document).ready(function () {
                	var $el = $("#' . $element->getHtmlId() . '");
                    $el.css("backgroundColor", "'. $value .'");
 
                	// Attach the color picker
                    $el.ColorPicker({
                    	color: "'. $value .'",
                        onChange: function (hsb, hex, rgb) {
                            $el.css("backgroundColor", "#" + hex).val("#" + hex);
                    	}
                	});
            	});
        	});
	        </script>';
    	return $html;
	}
 
}

<?php

namespace Vendor\Extension\Block;

class Color extends \Magento\Config\Block\System\Config\Form\Field {

public function __construct(

\Magento\Backend\Block\Template\Context $context, array $data = []

) {

parent::__construct($context, $data);

}

protected function _getElementHtml(\Magento\Framework\Data\Form\Element\AbstractElement $element) {

$html = $element->getElementHtml();

$value = $element->getData('value');

$html .= '<script type="text/javascript">

require(["jquery","jquery/colorpicker/js/colorpicker"], function ($) {

$(document).ready(function () {

var $el = $("#' . $element->getHtmlId() . '");

$el.css("backgroundColor", "'. $value .'");

// Attach the color picker

$el.ColorPicker({

color: "'. $value .'",

onChange: function (hsb, hex, rgb) {

$el.css("backgroundColor", "#" + hex).val("#" + hex);

}

});

</script>';

return $html;

}

We need to implement JavaScript color picker library to adminhtml_system_config_edit.xml file available at app\code\Vendor\Extension\view\adminhtml\layout

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="admin-2columns-left" xsi:noNamespaceSchemaLocation="../../../../../../../lib/internal/Magento/Framework/View/Layout/etc/page_configuration.xsd">
	<head>
    	<css src="jquery/colorpicker/css/colorpicker.css"/>
    	<link src="jquery/colorpicker/js/colorpicker.js"/>
	</head>
</page>

<?xml version="1.0" encoding="UTF-8"?>

<head>

</head>

</page>

Fill the below form if you have any Magento programming need.

Magento 2 : Get request params in your controller file
If you want get query string params in controller file,...
Magento 2 : Redirect custom page after login using plugin
Create di.xml and add the below code Magemonkey/Redirect/etc/frontend/di.xml [crayon-62838db2ab558402479122/] Create...
Magento 2 – How to change local date to UTC date?
You can try below code to change local date to...
How to change order status using cron?
Step 1: First you need to add registration.php file in...
Magento 2: How to add close button on error and success message?
Step1 : Override message.js in current theme file on the...

Author Info

Magento 2 Developer

Hire H. Shingala

Fill the form & Get Installation Support

How to Add Colour Picker in Magento 2 System Configuration?

Recent Articles

Author Info

Get a Free Quote

Connect With Us