Date Picker

1import { DatePicker } from '@/ui/Input'23<Field label="Deployment date" description="Times are shown in Europe/London.">4  <DatePicker5    value={date}6    onChange={setDate}7    min={startOfToday}8    typeable                      // never a gate9    format="dd/MM/yyyy"10  />11</Field>1213// Parse loosely, reformat on blur. Users type dates six different ways and14// all of them are the same date.15const PATTERNS = ['dd/MM/yyyy', 'yyyy-MM-dd', 'd MMM yyyy', 'MM/dd/yyyy']16function parseLoose(input: string, locale: string) {17  for (const p of PATTERNS) {18    const d = parse(input, p, new Date(), { locale })19    if (isValid(d)) return d20  }21  return null22}2324// The grid keyboard model IS the component. Without it this is mouse-only.25function onGridKeyDown(e: React.KeyboardEvent) {26  const move = {27    ArrowLeft: -1, ArrowRight: 1,28    ArrowUp: -7,   ArrowDown: 7,29  }[e.key]30  if (move) { e.preventDefault(); return setFocused(addDays(focused, move)) }31  if (e.key === 'PageUp')   { e.preventDefault(); setFocused(addMonths(focused, -1)) }32  if (e.key === 'PageDown') { e.preventDefault(); setFocused(addMonths(focused, 1)) }33}3435// Store the instant, display the local date. Storing local midnight is where36// off-by-one bugs come from.37const iso = zonedTimeToUtc(startOfDay(date), 'Europe/London').toISOString()

<div class="ds-datepicker">
  <label for="date">Deployment date</label>
  <input id="date" type="text" inputmode="numeric"
         placeholder="dd/mm/yyyy" aria-describedby="date-hint" />
  <button type="button" aria-label="Open calendar" aria-haspopup="dialog"
          aria-expanded="false">…</button>
  <p id="date-hint">Times are shown in Europe/London.</p>
</div>

<div role="dialog" aria-label="Choose a date">
  <div class="ds-cal__head">
    <button type="button" aria-label="Previous month">‹</button>
    <!-- Without the live region, paging is completely silent. -->
    <span aria-live="polite">July 2026</span>
    <button type="button" aria-label="Next month">›</button>
  </div>

  <div role="grid" aria-label="July 2026">
    <div role="row">
      <span role="columnheader" aria-label="Monday">Mo</span>
      …
    </div>
    <div role="row">
      <button role="gridcell" aria-label="21 July 2026"
              aria-current="date" tabindex="-1">21</button>
      <button role="gridcell" aria-label="24 July 2026"
              aria-selected="true" tabindex="0">24</button>
      <button role="gridcell" aria-label="9 July 2026" disabled>9</button>
    </div>
  </div>
</div>

.ds-cal {
  inline-size: 264px;                /* 7 × 32px + gaps + padding */
  padding: 12px;
  border: 1px solid var(--ds-border);
  border-radius: var(--radius-lg);
  background: var(--ds-surface-overlay);
  box-shadow: var(--shadow-e4);
}

.ds-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  /* Six rows always. A five-week month is 32px shorter, and paging would
     otherwise move every control below the panel. */
  grid-auto-rows: 32px;
  min-block-size: calc(6 * 32px + 5 * 2px);
}

[role='gridcell'] {
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  /* Square cells and tabular figures: a 1 and a 31 are the same target and
     the columns never shift between months. */
  font-variant-numeric: tabular-nums;
  color: var(--ds-fg-secondary);
}

[role='gridcell']:hover:not(:disabled) { background: var(--ds-layer-hover); }

[role='gridcell'][aria-selected='true'] {
  background: var(--ds-accent);
  color: var(--ds-fg-on-accent);
}

/* Today is a RING. Selection is a FILL. Two facts, two channels. */
[role='gridcell'][aria-current='date'] {
  box-shadow: inset 0 0 0 1px var(--ds-accent-border);
}

/* Square between the ends, rounded at them: the span reads as one bar. */
[role='gridcell'][data-in-range='true'] {
  border-radius: 0;
  background: var(--ds-accent-subtle);
}

@media (pointer: coarse) {
  .ds-cal { inline-size: 340px; }
  .ds-cal__grid { grid-auto-rows: 44px; }
}