Date picker

Date & time pickers let people select a date, time, or a range of dates.

to 
              
<!-- Date picker -->
<div class="mb-6">
  <label for="datepick" class="text-title-md inline-block mb-2">Date picker</label>
  <div id="datepicks" class="flex flex-col justify-center md:flex-row md:justify-between">
    <input id="datepick" class="datepick w-full h-12 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200" type="text" name="startdate">
  </div>
</div>

<!-- Range time -->
<div class="mb-6">
  <label for="startDate" class="text-title-md inline-block mb-2">Start and End date</label>
  <div id="rangetime" class="flex flex-col sm:flex-row justify-between">
    <input id="startDate" class="startDate w-full h-12 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200" type="text" name="start">
    <span class="sm:px-4 text-center">to</span>
    <input id="endDate" class="endDate w-full h-12 block leading-5 relative py-2 px-4 rounded bg-neutral-10 dark:bg-neutral-900 border focus:border-2 border-gray-500 overflow-x-auto focus:outline-none focus:border-primary-600 focus:ring-0 dark:text-gray-200 dark:border-gray-400 dark:focus:border-primary-200" type="text" name="end">
  </div>
</div>

Date picker is (Required "flatpickr" plugins)