Flatpickr - Datepicker
<div class="grid grid-cols-12 gap-5">
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Basic</label>
<input type="text" class="fp-input block w-full" data-provider="flatpickr" data-date-format="d M, Y" placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">DateTime</label>
<input type="text" class="fp-input block w-full" data-provider="flatpickr" data-date-format="d.m.y" data-enable-time placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Range</label>
<input type="text" class="fp-input block w-full" data-provider="flatpickr" data-date-format="d M, Y" data-range-date="true" placeholder="">
</div>
</div>
Flatpickr - Timepicker
<div class="grid grid-cols-12 gap-5">
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Timepicker</label>
<input type="text" class="fp-input block w-full" data-provider="timepickr" data-time-basic="true" placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">24-hour Time Picker</label>
<input type="text" class="fp-input block w-full" data-provider="timepickr" data-time-hrs="true" placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Time Picker w/ Limits</label>
<input type="text" class="fp-input block w-full" data-provider="timepickr" data-min-time="Min.Time" data-max-time="Max.Time" placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Preloading Time</label>
<input type="text" class="fp-input block w-full" data-provider="timepickr" data-default-time="16:45" placeholder="">
</div>
<div class="md:col-span-6 xl:col-span-4 col-span-12">
<label class="set-label">Inline</label>
<input type="text" class="fp-input block w-full" data-provider="timepickr" data-time-inline="11:42" placeholder="12 : 00 PM">
</div>
</div>
