# Date picker

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

Date picker
Start and End date
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)

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts