Bootstrap Colorpicker | Events

Using the different Bootstrap Colorpicker events is the best way to react to any colorpicker action. Check the full list of events.
In all events, the first argument passed to the event handlers (the event) contains the colorpicker, color objects, as well as the value, representing the color string.

Playing with events and the ColorItem object

This example listens to the colorpickerChange and colorpickerCreate events and changes the background color of the parent element using the complementary color of the selected one. This also shows how to use the ColorItem object.

Code

<div id="cp1" data-color="rgba(194, 39, 219, 0.4)"></div>
<script>
  $(function () {
    $('#cp1')
        .colorpicker({
          inline: true,
          container: true
        })
        .on('colorpickerChange colorpickerCreate', function (e) {
          e.colorpicker.picker.parents('.card').find('.card-header')
              .css('background-color', e.value);

          e.colorpicker.picker.parents('.card-body')
              .css('background-color', e.color.generate([180])[0].string('rgb'));
        });
  });
</script>

Using events with a custom template element

This example shows how to use a custom template with an input inside, that is able to set the color.

Code

<div id="cp3" data-color="#305AA2"></div>
<script>
  $(function () {
    $('#cp3').colorpicker({
          inline: true,
          container: true,
          template: '<div class="colorpicker">' +
          '<div class="colorpicker-saturation"><i class="colorpicker-guide"></i></div>' +
          '<div class="colorpicker-hue"><i class="colorpicker-guide"></i></div>' +
          '<div class="colorpicker-alpha">' +
          '   <div class="colorpicker-alpha-color"></div>' +
          '   <i class="colorpicker-guide"></i>' +
          '</div>' +
          '<div class="colorpicker-bar">' +
          '   <div class="input-group">' +
          '       <input class="form-control input-block color-io" />' +
          '   </div>' +
          '</div>' +
          '</div>'
        })
        .on('colorpickerCreate', function (e) {
          // initialize the input on colorpicker creation
          var io = e.colorpicker.element.find('.color-io');

          io.val(e.color.string());

          io.on('change keyup', function () {
            e.colorpicker.setValue(io.val());
          });
        })
        .on('colorpickerChange', function (e) {
          var io = e.colorpicker.element.find('.color-io');

          if (e.value === io.val() || !e.color || !e.color.isValid()) {
            // do not replace the input value if the color is invalid or equals
            return;
          }

          io.val(e.color.string());
        });
  });
</script>