Date Picker – Datumsauswahl-Komponente im UI-Design

Ein Date Picker ist eine spezialisierte UI-Komponente zur Datumsauswahl, die dem Nutzer eine visuelle Kalenderdarstellung oder strukturierte Eingabefelder bietet, um Datum (und optional Uhrzeit) fehlerfrei auszuwählen.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Kalender-Picker, Datumsfeld, Datepicker, Date Input, Calendar Widget

Was ist ein Date Picker?

Der Date Picker löst ein fundamentales UX-Problem: Datumsangaben sind fehleranfällig, wenn sie als Freitext eingegeben werden (verschiedene Formate, Tippfehler, unmögliche Daten wie der 31. Februar). Die Komponente strukturiert die Eingabe visuell und reduziert Fehlerquoten. Sie erscheint in Buchungsportalen, Formularstrecken, Kalenderapplikationen und überall dort, wo zeitliche Daten erfasst werden.

Erklärung

Varianten

• Single Date Picker: Auswahl eines einzelnen Datums – häufigste Form, z. B. Geburtstagseingabe oder Lieferdatum
• Date Range Picker: Auswahl eines Start- und Enddatums – typisch für Reisebuchungen, Urlaubsanfragen, Berichtszeiträume
• Date Time Picker: Kombiniert Datum- und Uhrzeitauswahl – für Terminbuchungen, Event-Planung
• Month/Year Picker: Auswahl auf Monats- oder Jahresebene – für Kreditkarten-Ablaufdaten, Berichtszeiträume
• Inline Calendar: Kalender dauerhaft sichtbar (nicht als Overlay), für Anwendungen mit zentraler Terminplanung

Zwei Interaktionsmodelle

Modell 1 – Texteingabe + Overlay: Ein Input Field mit Kalender-Icon. Klick auf Icon oder Feld öffnet ein Kalender-Panel (Overlay). Datum kann auch direkt eingetippt werden. Flexibel, platzsparend.

Modell 2 – Segmentierte Eingabe: Drei separate Felder für Tag, Monat, Jahr (z. B. „TT / MM / JJJJ"). Klarer in der Formaterwartung, schlechter für Kalender-Navigation.

Anatomie

Ein Date Picker besteht aus: Trigger/Input (Datumsfeld mit Kalender-Icon), Overlay/Panel (Kalender-Widget), Navigation (Vor/Zurück-Pfeile für Monatswechsel, Monatstitel klickbar für Jahresansicht), Date Grid (7×5 oder 7×6 Tage, mit Wochentag-Headern), Today-Indicator (aktuelles Datum hervorgehoben), Selected State (gewähltes Datum), Disabled Dates (vergangene Daten, gesperrte Termine).

States von Einzeltagen

Accessibility (WCAG 2.1)

• Kalender-Grid als <table> mit role="grid" oder ARIA Grid Pattern implementieren
• Jeder Tag: role="gridcell", aria-selected, aria-disabled
• Tastaturnavigation: Tab zu Navigations-Buttons, Pfeiltasten durch Datumsraster
• Monatstitel als aria-live="polite" – Screenreader kündigt Monatswechsel an
• Datumsformat im Label klar angeben (z. B. „Datum (TT.MM.JJJJ)")
• Escape schließt Overlay, Fokus kehrt zum Trigger zurück
• Direkteingabe als Alternative zum Kalender-Overlay immer ermöglichen

Beispiele

1. Booking.com – Check-in/Check-out: Klassischer Range Date Picker. Beim Klick auf „Check-in" öffnet sich ein zweimonatiger Kalenderüberblick. Ausgewählter Zeitraum wird mit blauer Hervorhebung dargestellt, vergangene Daten sind deaktiviert. Sehr hohe Nutzerfreundlichkeit durch den visuellen Range-Kontext.
2. Google Calendar – Neues Ereignis: Date Time Picker mit natürlicher Spracheingabe-Unterstützung und Smart-Parsing – „nächsten Dienstag" wird erkannt. Hohe Effizienz für Power-User.
3. Mobile vs. Desktop: iOS öffnet bei <input type="date"> ein natives Bottom-Sheet-Rollenpicker-Interface. Android zeigt ein Material Design Kalender-Sheet. Beide sind touch-optimiert und sollten auf Mobile nativen Pickkern bevorzugt werden. Custom-Kalender auf Mobile erfordern großzügige Touch-Targets (mindestens 44 × 44 px pro Tag).
4. Accessibility Best Practice: Der GOV.UK Date Picker-Prototyp setzt auf drei separate Eingabefelder (Tag, Monat, Jahr) als einfachste, am besten screenreader-kompatible Lösung – keine komplexe ARIA-Implementierung, maximale Kompatibilität.
5. Häufiger Fehler: Den Nutzer zwingen, ausschließlich über den Kalender ein Datum einzugeben, ohne Möglichkeit der Direkteingabe. Power-User tippen Daten lieber ein. Zudem: kein Hinweis auf das erwartete Format (TT.MM.JJJJ vs. MM/TT/JJJJ) führt zu Fehlern.

In der Praxis

Figma: Date Picker als komplexe Komponente mit Overlay-Technik. Kalender-Grid mit Auto Layout (7 Spalten für Wochentage). Einzelne Tages-Zellen als Variants (Default/Hover/Selected/Disabled/Today). Für Prototypen Overlays nutzen, die beim Klick auf Input erscheinen.

HTML/CSS-Grundstruktur: ```html <!-- Native Lösung (einfach, barrierefrei) --> <label for="travel-date">Reisedatum</label> <input type="date" id="travel-date" name="travel-date" min="2025-01-01" max="2026-12-31" aria-describedby="date-format-hint" /> <span id="date-format-hint">Format: TT.MM.JJJJ</span>

<!-- Für Range Picker: zwei date inputs --> <label for="check-in">Anreise</label> <input type="date" id="check-in" name="check-in"> <label for="check-out">Abreise</label> <input type="date" id="check-out" name="check-out"> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Soll ich einen nativen `<input type="date">` oder einen Custom Date Picker verwenden? Für einfache Anwendungsfälle ist das native Input-Element die bessere Wahl: barrierefrei, wartungsarm, automatisch mobile-optimiert. Custom Date Picker sind sinnvoll, wenn Range-Auswahl, Verfügbarkeitsanzeige (z. B. Hotelbuchung mit gesperrten Daten), Mehrsprachigkeit oder spezifische visuelle Anforderungen bestehen.

Wie gehe ich mit internationalen Datumsformaten um? Immer das Datumsformat im Feld-Label oder als Helper Text angeben. In Deutschland: TT.MM.JJJJ, international oft MM/TT/JJJJ (USA) oder JJJJ-MM-TT (ISO 8601). Bei internationalem Publikum am besten ISO 8601 intern verarbeiten und das Format der Locale des Nutzers anzeigen. Natives <input type="date"> übernimmt die Darstellung automatisch nach Browser-Locale.

Verwandte Einträge

• Input Field
• Dropdown & Select
• Slider & Range
• Modal Dialog

Weiterführend

• Nielsen Norman Group – „Date-Picker Design": nngroup.com
• Material Design 3 – Date Picker: m3.material.io/components/date-pickers
• Apple Human Interface Guidelines – Date Pickers: developer.apple.com/design/human-interface-guidelines/date-pickers
• WAI-ARIA Authoring Practices – Date Picker Dialog: w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog