Date Picker

uistable

Date Picker — extracted 1:1 from WEM-App.

npx shadcn add @krawma/date-picker

npm: date-fns@^4.1.0, lucide-react@^1.22.0 · registry: @krawma/button, @krawma/calendar, @krawma/date, @krawma/popover, @krawma/utils

Preview

States

opencloseddisabledempty

Keyboard

EnterEscapeArrowLeftArrowRightArrowUpArrowDown

Depends on

buttoncalendardatepopoverutils

Purpose

The canonical date field: a button that opens a calendar in a popover and emits an ISO date string (YYYY-MM-DD). Prefer it over a raw <input type="date"> so dates are consistent and timezone-safe across the app.

Anatomy

A composite: button trigger (shows the formatted date or placeholder) → popover → calendar, with ISO⇄Date conversion via the date lib item.

Style

No variants — token-backed outline trigger; empty state uses muted text.

Behavior & functionality

Controlled: value is an ISO date string (or null/undefined); onChange emits the new ISO string, or null when cleared.
Conversion is timezone-safe (local calendar day; never toISOString()), handled by @krawma/date.

Accessibility

The popover traps focus into the calendar; the calendar provides full keyboard date navigation (arrows/Enter); Escape closes and returns focus to the trigger.
Label the trigger (pass id and pair a Label, or aria-label).

Do / Don't

✅ Use for any date field; keep values as ISO strings end-to-end.
❌ Don't parse/format dates at the call site — the component + date lib own it.