Date & time picker

Enable time alongside the calendar to capture a full timestamp in one control — appointments, deadlines and log filters are typical uses.

Add enableSeconds: true if seconds matter, or time_24hr: false for a 12-hour clock.

Code

<input id="picker" placeholder="Select date & time...">
<script>
  flatpickr("#picker", {
    enableTime: true,
    dateFormat: "Y-m-d H:i"
  });
</script>

← Back to the full demo · Home · Guide