CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrapcolor-picker
Muthukrishnan
Muthukrishnan

Reputation: 159

Bootstrap Colorpicker, How to set color value box inside dropdown?

I'm using Bootstrap Colorpicker 2.3, but my requirement is, I want to add the text field value box inside the color picker, like this example, is it possible ? could you somebody help me please, thanks in advance.

Upvotes: 2

Views: 4556

Answers (1)

J Santosh
J Santosh

Reputation: 3847

Updated your fiddle with some additional code.

Plugin has changeColor event . Use this to update input element value.

$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
    $('.store').val($(this).colorpicker('getValue'))
});


$('.demo1').colorpicker();

$('.demo2').colorpicker({
  template: '<div class="colorpicker dropdown-menu">' +
    '<div class="colorpicker-saturation"><i><b></b></i></div>' +
    '<div class="colorpicker-hue"><i></i></div>' +
    '<div class="colorpicker-alpha"><i></i></div>' +
    '<div class="colorpicker-color"><div /></div>' +
    '<div class="colorpicker-selectors"></div>' +
    '<div class="colorpicker-selectors"></div>' +
    '<input type="text" value="" class="store" />' +
    '</div>',
  input: '.store'
});


$('.demo2').on('changeColor.colorpicker', function(a, b, c) {
  $('.store').val($(this).colorpicker('getValue'))
});
.demo1,
  .demo2 {
    width: 200px;
    margin: 30px;
  }
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.js" type="text/javascript"></script>
<link href="/css/normalize.css" type="text/css" rel="stylesheet">
<link href="/css/result-light.css" type="text/css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/js/bootstrap-colorpicker.js" type="text/javascript"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.0/css/bootstrap-colorpicker.min.css" type="text/css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" type="text/css" rel="stylesheet">





<div class="input-group demo1">
  <input type="text" value="" class="form-control" />
  <span class="input-group-addon"><i></i></span>
</div>


<div class="form-group">
  <div class="field-title">With template</div>
  <div class="input-group input-picker demo2">
    <input type="text" value="" class="form-control" />
    <div class="dss"></div>
    <span class="input-group-addon"><i></i></span>
  </div>
</div>

Fiddle

Upvotes: 2

Related Questions