Hello,
I have an issue in setting the colorpicker value in livewire… I tried a lot of examples but unfortunatelly non of them worked for me…
The issue is… when I select the color from the picker, it is showing the value in the input but it is not actual value for the input, I have to change the value manually, then it will be set. Find the code below.
head
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.5.3/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-colorpicker/2.3.6/js/bootstrap-colorpicker.js"></script>
</head>
input // I have removed classes for a better readability
<div wire:ignore id="cp2" class="input-group colorpicker-component"
data-cp2="@this"
data-provide="colorpicker"
>
<x-jet-label for="color" value="{{ __('Color') }}" />
<x-jet-input type="text" id="colorInput" name="color"
wire:model.defer="Info.color"
class="block mt-1 w-full form-control"
data-target="#cp2"
/>
<span class="input-group-append"
<span class="input-group-addon colorpicker-input-addon">
<i class="mt-3 w-80 h-40 absolute ml-4 border-2 shadow-lg"
style="width: 60px !important; height: 30px !important;
border-radius: 10% !important; position: absolute;">
</i>
</span>
</span>
</div>
Script
<script>
$(function() {
$('#cp2').colorpicker({
popover: false,
inline: false,
container: '#cp2',
color: '#16813d',
});
});
$('#cp2').on('change.colorpicker', function(e){
let color = $(this).data('cp2');
eval(color).set('Info.color', $('#colorInput').val());
});
</script>