CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcolor-picker
New Bee
New Bee

Reputation: 1047

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.

Upvotes: 6

Views: 17844

Answers (5)

Dileep TP
Dileep TP

Reputation: 135

Use both of these together. It will work

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

Upvotes: 4

Alberto Cerqueira
Alberto Cerqueira

Reputation: 1419

I used:

$('#inputcolor').val('#ccc');
$('#colorPicker div').css('backgroundColor', '#ccc');

good luck

Upvotes: 0

Jonzi
Jonzi

Reputation: 151

Acording to documentation

$colorpicker.colorpicker('setValue', value);

Tried with hex, seems to be working fine

Upvotes: 0

andydoe
andydoe

Reputation: 224

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

Upvotes: 17

BahaEddine Ayadi
BahaEddine Ayadi

Reputation: 987

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

Upvotes: 1

Related Questions