Color Picker

														
<form action="#">
	<div class="form-group">
		<label class="form-label">Date Range Picker</label>
		<span class="d-block w-80p">
			<span class="color-picker"></span>
		</span>
	</div>
	<div class="form-group">
		<label class="form-label">Date Range Picker With Times</label>
		<div class="input-group color-picker" title="Using horizontal option">
			<span class="input-group-text colorpicker-input-addon"><i></i></span>
			<input type="text" class="form-control" value="#009B84"/>
		</div>
	</div>
</form>
													

														
<!-- Pickr JavaScript -->
<script src="vendors/pickr-widget/dist/pickr.min.js"></script>
<!-- Bootstrap Colorpicker JavaScript -->
<script src="vendors/bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
															
/* Pikr Init*/
"use strict";
const pickr = Pickr.create({
    el: '.color-picker',
	default: '#00acf0',
	position: 'left',
    components: {
		preview: true,
        opacity: true,
        hue: true,
		interaction: {
            hex: true,
            rgba: true,
            hsva: true,
            input: true,
            clear: true,
            save: true
        }
    }
});

/*Bootstrap Color Picker Init*/ 
$(function () {
	$('.color-picker').colorpicker({
	  horizontal: true
	});
});