---
name: date-picker-ux-patterns
description: "Standing-Rule für jeden Date-Picker / Calendar in Aria-Apps — 6 UX-Patterns aus \"UI Systems\"-Reel"
metadata: 
  node_type: memory
  type: feedback
  originSessionId: afcfa3f1-b717-48d8-bc49-ebe64b2cd749
---

Standing Order 2026-05-21 23:50: Jeder neue oder zu refactorende Date-Picker / Calendar-Component in einer Aria-App (Kadi-v2, aria-control v3, zukünftige Apps) bekommt **by default** die folgenden 6 UX-Patterns:

1. **Presets**: Today / Yesterday / Last 7 days / Last 30 days / Last quarter / Custom range als Sidebar links
2. **Range Highlight**: Hover = Preview, Click = Lock, Drag = Refine
3. **Two Months side by side**: 2 Monate Default, 3 Monate auf wide screens
4. **Keyboard**: Arrow keys, PgUp/Down (Monat), Shift+PgUp/Down (Jahr), Home/End, Enter validates, Escape kills, Type-Input akzeptiert
5. **Mobile is not a popover**: Full-Screen-Sheet, vertical Scroll, Today sticky top, Big Confirm-Button bottom (Safe-Area aware)
6. **Save / Discard explizit**: klare Save (Disk-Icon) und Discard (Trash-Icon) Actions

**Why:** Kais hat in Telegram-Video IMG_1088.MP4 (2026-05-21) explizit gesagt "Für alle Kalender umsetzen und merken". Konsistente Calendar-UX über alle Apps reduziert Cognitive Load und User-Verwirrung. Pattern konvergent mit Tailwind UI, shadcn, Mantine, Radix.

**How to apply:**
- Bei *jedem* neuen Date-Picker-Implementation: gegen die 6 Patterns checken
- Bei *bestehenden* Pickern: in Refactor-Cycles nachziehen
- Bei *Design-Reviews*: als Standard-Check-Liste anwenden
- Brain-Detail: `02-Wissen/date-picker-ux-patterns-2026-05-21.md`
- Konkrete Kadi-v2 Adoption tracked in [[KAR-465]]
- Conflict-Audit: Keyboard-Shortcuts gegen aria-control v3 Cmd-Palette ([[KAR-301]])