Search code examples
twitter-bootstrapcolor-picker

How with bootstrap-colorpicker to get selected color only in format “#ffffff”?


In my laravel 5.8 / "bootstrap": "^4.0.0" app I use I use bootstrap-colorpicker with sample : https://itsjavi.com/bootstrap-colorpicker/tutorial-p02_Advanced_Examples.html

and I want selecting color from picker always to get selected color in format “#ffffff”. But the problem is that periodically got value in rgb format : https://prnt.sc/rwqlqj Looks like it happens when I click on outer block selection. Are there some options to get selected color only in format “#ffffff” ?

I tried the example in link above like :

$('#cp_color').colorpicker({ 
    popover: false,
    inline: false,
    container: true,
})

    .on('colorpickerChange colorpickerCreate', function (e) {
        var colors = e.color.generate('tetrad');

        colors.forEach(function (color, i) {
            var colorStr = color.string(),
                swatch = e.colorpicker.picker
                    .find('.colorpicker-swatch[data-name="tetrad' + (i + 1) + '"]');

            swatch
                .attr('data-value', colorStr)
                .attr('title', colorStr)
                .find('> i')
                .css('background-color', colorStr);
        });
    })
;

But failed and peridically I goy invalid rgb value.

How to get selected color only in format “#ffffff” ? Thanks!


Solution

  • The decision is in additive format parameter :

    $('#cp_color').colorpicker({ 
        inline: false,
        container: true,
        format: 'hex',