Can't set rgba value in bootstrap colorpicker

Question

I'm using the bootstrap colorpicker (see https://itsjavi.com/bootstrap-colorpicker), and it's working great, except for one thing: Having jQuery change the value to something that includes transparency.

I made a jsfiddle that reproduces the problem http://jsfiddle.net/gwonha3L:

Html:

<div class="main">
  <div class="color input-group colorpicker-component">
    <input type="text" class="form-control" />
    <span class="input-group-addon"><i></i></span>
  </div>

  <input id="updatecolorbtn" type="button" value="Set color to rgba(255,0,0,0.5)" class="form-control" />

  <div id="colordiv" style="width: 100px; height: 100px; background-color: lightblue;"></div>
</div>

Javascript:

$(function() {
  $('.color').colorpicker().on('changeColor', function(ev) {
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue'));
  });
});

$("#updatecolorbtn").click(function() {
  $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)');
});

You would expect that clicking the button would change the color to red with 50% transparency, but instead it's just red (#ff0000). If I use the colorpicker itself the transparency just fine.

Am I doing something wrong?

Answer 1

You need to insert the format rgba

$(function() {
  $('.color').colorpicker({format: 'rgba'}).on('changeColor', function(ev) {
    $('#colordiv').css('background-color', $('.color').colorpicker('getValue'));
  });
});

$("#updatecolorbtn").click(function() {
  $('.color').colorpicker('setValue', 'rgba(255,0,0,0.5)');
});

http://jsfiddle.net/gwonha3L/1/