Time picker

flatpickr can act as a time-only picker: enable time, hide the calendar, and format the value as hours and minutes.

Use dateFormat: "h:i K" for a 12-hour clock with AM/PM, and minuteIncrement to change the step.

Code

<input id="picker" placeholder="Select time...">
<script>
  flatpickr("#picker", {
    enableTime: true,
    noCalendar: true,
    dateFormat: "H:i"
  });
</script>

← Back to the full demo · Home · Guide