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. Like .date-picker, it is purely structural: no JavaScript ships with it, so your own code decides which dates are the start/end/in-between and applies the classes as the user clicks through the calendar.

July 2026

S	M	T	W	T	F	S

<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>
      <tr>
        <td><button type="button" class="date-range-day">1</button></td>
        <td class="range-start"><button type="button" class="date-range-day is-start">2</button></td>
        <td class="in-range"><button type="button" class="date-range-day">3</button></td>
        <td class="in-range"><button type="button" class="date-range-day">4</button></td>
        <td class="range-end"><button type="button" class="date-range-day is-end">5</button></td>
        <td><button type="button" class="date-range-day">6</button></td>
        <td><button type="button" class="date-range-day">7</button></td>
      </tr>
    </tbody>
  </table>
</div>