color picker in magento admin panel

Question

I want to add a color picker in Magento 1.7 CE Admin panel. Knowing that I already used the custom select model but I can't find how to add a custom color picker.

Can anyone help me out?

Thanks.

Answer 1

Check out JSColor:

http://jscolor.com/

Its an open source and very easy to use Javascript library. All you have to do is import the library somewhere in your application, than you can simply create an input with the class "color". JSColor does the rest. I just used it in a recent Magento project, hopefully it will fit your needs as well.

UPDATE: To answer the poster's question a little more indepth, here is how I have implemented jscolor into my magento applications:

First make sure that you have pulled in JSColor's javascript file, I did this in my layout.xml for my module, you could do the same:

<layout version="0.1.0">
<default>
    <reference name="head">
        <action method="addJs">
            <script>jscolor/jscolor.js</script>
        </action>
    </reference>
</default>

Inside the html of your custom block, you can place your code for creating a jscolor input:

<input class="color {required:false, adjust:false, hash:true}">

Using JSColor is as easy as having a class assigned as color, plus any additional settings you want to set (see the jscolor docs).

Alternatively, if you are using a standard Magento admin panel form and you want to take advantage of premade Magento blocks, you could have your block extend Varien_Data_Form_Element_Text and do something like this:

$fieldset->addType('mycustomblock', 'Mycompany_Mymodule_Block_Adminhtml_Edit_Elements_Mycustomblock');

            $fieldset->addField(
            'mycustomblock',
            'mycustomblock',
            array(
                'label'     => Mage::helper('MyModule')->__($label),
                'required'  => true,
                'name'      => 'yourinputname',
                'class'     => 'color {required:false, adjust:false, hash:true}',
                'value'     => $value
            )
        );