Picker
Basic Example
<input type="text" class="form-input" id="datepicker-basic">
DateTime
<input type="text" class="form-input" id="datepicker-datetime">
Human-friendly Dates
<input type="text" class="form-input" id="datepicker-humanfd">
MinDate and MaxDate
<input type="text" class="form-input" id="datepicker-minmax">
Disabling dates
<input type="text" class="form-input" id="datepicker-disable">
Selecting multiple dates
<input type="text" class="form-input" id="datepicker-multiple">
Range
<input type="text" class="form-input" id="datepicker-range">
Picker
<input type="text" class="form-input" id="datepicker-timepicker">
Colorpicker
Themes
Classic Demo
Use classic-colorpicker class to set
classic colorpicker.
Monolith Demo
Use monolith-colorpicker class to set
monolith colorpicker.
Nano Demo
Use nano-colorpicker class to set nano
colorpicker.
Options
Demo
Use colorpicker-demo class to set demo
option colorpicker.
Picker with Opacity & Hue
Use colorpicker-opacity-hue class to set
colorpicker with opacity & hue.
Switches
Use colorpicker-switch class to set switch
colorpicker.
Picker with Input
Use colorpicker-input class to set
colorpicker with input.
Color Format
Use colorpicker-format class to set
colorpicker with format option.
<div>
<div class="grid lg:grid-cols-3 md:grid-cols-2 gap-6">
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Classic Demo</h5>
<p class="text-gray-400 grow">Use <code>classic-colorpicker</code> class to set
classic colorpicker.</p>
<div class="classic-colorpicker"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Monolith Demo</h5>
<p class="text-gray-400 grow">Use <code>monolith-colorpicker</code> class to set
monolith colorpicker.</p>
<div class="monolith-colorpicker"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Nano Demo</h5>
<p class="text-gray-400 grow">Use <code>nano-colorpicker</code> class to set nano
colorpicker.</p>
<div class="nano-colorpicker"></div>
</div>
</div>
</div>
<div class="mt-5">
<div class="grid lg:grid-cols-5 md:grid-cols-3 gap-6">
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Demo</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-demo</code> class to set demo
option colorpicker.</p>
<div class="colorpicker-demo"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Picker with Opacity & Hue</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-opacity-hue</code> class to set
colorpicker with opacity & hue.</p>
<div class="colorpicker-opacity-hue"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Switches</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-switch</code> class to set switch
colorpicker.</p>
<div class="colorpicker-switch"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Picker with Input</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-input</code> class to set
colorpicker with input.</p>
<div class="colorpicker-input"></div>
</div>
<div class="bg-slate-100 p-4 rounded-md flex flex-col">
<h5 class="text-base text-gray-400 mb-2 shrink-0">Color Format</h5>
<p class="text-gray-400 grow">Use <code>colorpicker-format</code> class to set
colorpicker with format option.</p>
<div class="colorpicker-format"></div>
</div>
</div>
</div>