Bootstrap colorpicker initial color value

Question

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 1

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');

Answer 2

Use both of these together. It will work

$('#inputcolor').colorpicker({color : "Your_color"})
$('#inputcolor').colorpicker('setValue', "Your_color")

Answer 3

It worked for me with this code :

$('#colorPicker').colorpicker(document.getElementById('inputcolor'),'#ea0437');

I just gave the input the id of "inputcolor" and then get it with getElementById.

EDIT:

How about assigning a value to the input when the document loads completely,and then the colorpicker pick it, so it'll be like a default color.

Here's the new code :

$(document).ready(function(){
    $('#inputcolor').val('#ccc');
});
    $('#colorPicker').colorpicker();

There's so much issues with this library, you can have a look at the issues in their github .

Here's the new Fiddle