Date Picker

                  
<!-- Date Picker with Flatpickr -->
<div class="relative mb-6">
  <label for="flatpickr" class="mb-2 block text-primary-300">Select Date</label>
  <input type="text" id="flatpickr" class="w-full uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Select a date">
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#flatpickr", {
      dateFormat: "Y-m-d", // Format: YYYY-MM-DD
      altInput: true,
      altFormat: "F j, Y", // Human-friendly format
      allowInput: true
    });
  });
</script>
                  
                

                  
<!-- Date Range Picker with Flatpickr -->
<div class="relative mb-6">
  <label for="date-range" class="mb-2 block text-primary-300">Select Date Range</label>
  <input type="text" id="date-range" class="w-full uioajsncmhdje py-2 bg-primary-950 border border-primary-600 focus:shadow-sm focus:border-primary-300 focus:text-primary-300 placeholder-primary-800 focus:outline-none focus:ring-0" placeholder="Select date range">
</div>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    flatpickr("#date-range", {
      mode: "range", // Enable range mode for selecting two dates
      minDate: "today", // Start date selection from today
      dateFormat: "Y-m-d", // Format: YYYY-MM-DD
      altInput: true, // Show a more human-readable format
      altFormat: "F j, Y", // e.g. January 1, 2024
      allowInput: true
    });
  });
</script>