Date picker

The date picker (.date-picker) is a static calendar-grid layout for choosing a single date — a month header with previous/next navigation buttons, a table of weekday columns, and one button per day. It is purely structural and visual: FlickUI ships no JavaScript for month navigation, day selection, or keyboard support, since date logic varies too much between apps to bake into a generic script.

July 2026

S	M	T	W	T	F	S

<div class="date-picker">
  <div class="date-picker-header">
    <button type="button" class="date-picker-nav" aria-label="Previous month">‹</button>
    <span class="date-picker-title">July 2026</span>
    <button type="button" class="date-picker-nav" aria-label="Next month">›</button>
  </div>
  <table class="date-picker-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-picker-day date-picker-day-outside" disabled>28</button></td>
        <td><button type="button" class="date-picker-day">1</button></td>
        <td><button type="button" class="date-picker-day">2</button></td>
        <td><button type="button" class="date-picker-day date-picker-day-today">3</button></td>
        <td><button type="button" class="date-picker-day is-selected">4</button></td>
        <td><button type="button" class="date-picker-day">5</button></td>
        <td><button type="button" class="date-picker-day">6</button></td>
      </tr>
    </tbody>
  </table>
</div>