Date range

The date range picker (.date-range) is the two-endpoint sibling of .date-picker — the same month-grid layout, but with an additional visual "band" that shades every day between a selected start and end date. It is fully interactive out of the box: flickui.js renders the real calendar grid, handles click-to-pick-start, a live hover preview of the range while picking the second date, click-to-pick-end, and the prev/next month navigation — no author JavaScript required. Clicking a day before the current start restarts the selection from that earlier day. Once both a start and end are picked, flickui.js fires flick:change with { start, end }, real Date objects.

<div class="date-range">
  <div class="date-range-header">
    <button type="button" class="date-range-nav" aria-label="Previous month">‹</button>
    <span class="date-range-title">July 2026</span>
    <button type="button" class="date-range-nav" aria-label="Next month">›</button>
  </div>
  <table class="date-range-grid">
    <thead><tr><th>S</th><th>M</th><th>T</th><th>W</th><th>T</th><th>F</th><th>S</th></tr></thead>
    <tbody><!-- flickui.js renders the day grid into here on init --></tbody>
  </table>
</div>