Date range picker

Range mode lets a visitor choose a start and an end date in one calendar — the pattern used by booking and reporting forms.

Selected values are joined with the range separator ( to by default). For two linked inputs, flatpickr also ships a rangePlugin.

Code

<input id="picker" placeholder="Select a date range...">
<script>
  flatpickr("#picker", { mode: "range", dateFormat: "Y-m-d" });
</script>

← Back to the full demo · Home · Guide