Skip to content

Bootstrap colorpicker initial color value

I am using bootstrap colorpicker but my requirement is to change the default onload color differently on change of select drop down list.

I am using the below constructor :-

$('#colorPicker').colorpicker();

This is the code in jsp.

<div id='colorPicker'>
 <input type='text' value='#ea0437' class='form-control'/>
 <span class='input-group-addon'></span>
</div>

I am getting the color code from database so I can’t add the initial color code as given above in the following line :

<input type='text' value='#ea0437' class='form-control'/>

How can I provide this color in constructor ? The documentation says that there is a color option, but no demonstration given. How can I provide the color initially ? Something like this :

$('#colorPicker').colorpicker({
color : '#ea0437'
})

Any suggestion? Thanks in advance.

Answer

I got mine to work after days of trying it out. It appears an onchange event has been attached to the colorpicker input field, but doesn’t get fired, after setting the value through script. Hence u have to fire it manually, like this :

$("#inputcolor").val("#bbccff");
$("#inputcolor").trigger('change');