<label class="relative flex">
    <input
      id="flatpickr1"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose time..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </span>
  </label>

  <!-- Javascript -->

  <script>
    const config1 = { enableTime: true, noCalendar: true, dateFormat: "H:i" };
    const flatpickr1 = document.querySelector("#flatpickr1");
    flatpickr1._timepicker = flatpickr(flatpickr1, config1);
  </script>
                
              

                
  <label class="relative flex">
    <input
      id="flatpickr2"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose time..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </span>
  </label>

  <!-- Javascript -->

  <script>
    const config2 = {
      enableTime: true,
      noCalendar: true,
      dateFormat: "H:i",
      time_24hr: true,
    };
    const flatpickr2 = document.querySelector("#flatpickr2");
    flatpickr2._timepicker = flatpickr(flatpickr2, config2);
  </script>
                
              

                
  <label class="relative flex">
    <input
      id="flatpickr3"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose time..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </span>
  </label>

  <!-- Javascript -->

  <script>
    const config3 = {
      enableTime: true,
      noCalendar: true,
      dateFormat: "H:i",
      minTime: "15:00",
      maxTime: "22:30",
    };

    const flatpickr3 = document.querySelector("#flatpickr3");
    flatpickr3._timepicker = flatpickr(flatpickr3, config3);
  </script>
                
              

                
  <label class="relative flex">
    <input
      id="flatpickr4"
      class="form-input peer w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 pl-9 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose time..."
      type="text"
    />
    <span
      class="pointer-events-none absolute flex h-full w-10 items-center justify-center text-slate-400 peer-focus:text-primary dark:text-navy-300 dark:peer-focus:text-accent"
    >
      <svg
        xmlns="http://www.w3.org/2000/svg"
        class="size-5"
        fill="none"
        viewBox="0 0 24 24"
        stroke="currentColor"
        stroke-width="1.5"
      >
        <path
          stroke-linecap="round"
          stroke-linejoin="round"
          d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
        />
      </svg>
    </span>
  </label>

  <!-- Javascript -->

  <script>
    const config4 = {
      enableTime: true,
      noCalendar: true,
      dateFormat: "H:i",
      defaultDate: "13:13",
    };

    const flatpickr4 = document.querySelector("#flatpickr4");
    flatpickr4._timepicker = flatpickr(flatpickr4, config4);
  </script>
                
              

                
  <label>
    <input
      id="flatpickr5"
      class="form-input w-full rounded-lg border border-slate-300 bg-transparent px-3 py-2 placeholder:text-slate-400/70 hover:border-slate-400 focus:border-primary dark:border-navy-450 dark:hover:border-navy-400 dark:focus:border-accent"
      placeholder="Choose time..."
      type="text"
    />
  </label>

  <!-- Javascript -->

  <script>
    const config5 = {
      inline: true,
      enableTime: true,
      noCalendar: true,
      dateFormat: "h : m",
      defaultDate: dayjs().format("h : m"),
    };

    const flatpickr5 = document.querySelector("#flatpickr5");
    flatpickr5._timepicker = flatpickr(flatpickr5, config5);
  </script>