Version: latest

Universell einsetzbar

DatePicker funktioniert sowohl auf dem Server als auch im Browser. Nutze immer den Standard-Import (z. B. @prokodo/ui/date-picker) — die Library erkennt die Umgebung automatisch.

DatePicker

DatePicker rendert ein Texteingabefeld, das ein barrierefreies Kalender-Popup zur Datumsauswahl öffnet. Unterstützt Einzel-Datum, Bereichsauswahl und Zeitauswahl mit vollständiger Lokalisierung.

Übersicht

import { DatePicker } from "@prokodo/ui/date-picker"
;<DatePicker
  label="Appointment date"
  name="date"
  value={date}
  onChange={setDate}
  locale="de"
/>

Live PreviewOpen in Storybook ↗

Import

import { DatePicker } from "@prokodo/ui/date-picker"

Styling is handled via design tokens — no additional CSS import required.

Props

Prop	Typ	Standard	Pflicht	Beschreibung
`id`	`string`	—	—	HTML-id für das Eingabefeld.
`label`	`string`	—	—	Beschriftungstext.
`value`	`Dayjs \| string \| null`	—	—	Gesteuerter Datumswert.
`defaultValue`	`Dayjs \| string \| null`	—	—	Unkontrollierter Ausgangswert.
`withTime`	`boolean`	`false`	—	Zeitauswahl aktivieren.
`minuteStep`	`number`	`1`	—	Minuten-Schrittweite.
`disabled`	`boolean`	`false`	—	Datepicker deaktivieren.
`required`	`boolean`	`false`	—	Feld als Pflichtfeld markieren.
`fullWidth`	`boolean`	`false`	—	An Container-Breite anpassen.
`color`	`Variants`	—	—	Farbakzent-Variante.
`errorText`	`string`	—	—	Fehlermeldung (setzt Fehlerzustand).
`helperText`	`string`	—	—	Hilfetext unterhalb der Eingabe.
`todayLabel`	`string`	—	—	Label des „Heute“-Buttons.
`clearLabel`	`string`	—	—	Label des „Löschen“-Buttons.
`applyLabel`	`string`	—	—	Label des „Übernehmen“-Buttons.
`timeLabel`	`string`	—	—	Überschrift des Zeitbereichs.
`onChange`	`(value: Dayjs \| null) => void`	—	—	Wird bei Datumswechsel aufgerufen.
`className`	`string`	—	—	CSS-Klasse am Root-Element.

Siehe src/components/date-picker/DatePicker.model.ts für den vollständigen DatePickerProps-Typ.

Design-Tokens

Passe DatePicker über CSS Custom Properties auf :root oder einem übergeordneten Element an.

Token	Standard	Beschreibung
`--pk-dp-trigger-bg`	`var(--pk-color-surface)`	Trigger-Hintergrund
`--pk-dp-trigger-fg`	`var(--pk-color-fg)`	Trigger-Textfarbe
`--pk-dp-trigger-radius`	`var(--pk-radius-pill)`	Eckenradius des Triggers
`--pk-dp-trigger-label-float-fg`	`var(--pk-color-brand)`	Floating-Label-Farbe
`--pk-dp-dialog-bg`	`var(--pk-color-surface)`	Kalender-Dialog-Hintergrund
`--pk-dp-dialog-radius`	`var(--pk-radius-lg)`	Kalender-Dialog-Eckenradius
`--pk-dp-dialog-shadow`	`var(--pk-shadow-lg)`	Kalender-Dialog-Schatten
`--pk-dp-day-radius`	`var(--pk-radius-circle)`	Tageszellen-Eckenradius
`--pk-dp-day-today-ring`	`var(--pk-color-brand)`	Heutiger-Tag-Rahmenfarbe
`--pk-dp-gradient-from`	`var(--pk-color-brand)`	Verlauf Start (Selektion)
`--pk-dp-gradient-to`	`var(--pk-color-accent)`	Verlauf Ende (Selektion)

AIC-Hinweis

Verwende im Anwendungscode immer den Standard-Importpfad:

import { DatePicker } from "@prokodo/ui/date-picker"

Eine separate Auswahl von /client oder /lazy ist im Consumer-Code nicht erforderlich.

AIC-Komponenten unterstützen außerdem ein priority-Flag für kritische Above-the-fold-Elemente. Am sichtbarsten ist das bei Image (natives Preloading via <link rel="preload"> für Above-the-fold-Inhalte).

WCAG-2.2-Status

Kriterium	Bezeichnung	Status	Hinweis
1.3.1	Info und Beziehungen (A)	✅ Erfüllt	Semantische Struktur (Überschriften, Listen, Labels, Landmarks) muss programmatisch via HTML oder ARIA vermittelt werden.
1.3.5	Eingabezweck identifizieren (AA)	🔍 Manuell prüfen	Formularfelder, die persönliche Daten erfassen, müssen ihren Zweck via HTML-autocomplete-Attribut kommunizieren.
2.1.1	Tastatur (A)	🔍 Manuell prüfen	Alle Funktionalität muss allein über Tastatur bedienbar sein, ohne Timing-Anforderungen.
2.1.2	Keine Tastaturfalle (A)	🔍 Manuell prüfen	Der Tastaturfokus darf niemals innerhalb einer Komponente eingeschlossen sein; Nutzer müssen immer mit Standardtasten navigieren können.
2.4.3	Fokusreihenfolge (A)	🔍 Manuell prüfen	Die Tastaturfokus-Reihenfolge muss im vollständigen seitenseitigen Integrationskontext Bedeutung und Bedienbarkeit erhalten.
2.4.7	Fokus sichtbar (AA)	🔍 Manuell prüfen	Auf jedem interaktiven Element muss ein sichtbarer Tastaturfokus-Indikator vorhanden sein. Prüfung gegen das angewendete Produkt-Theme erforderlich.
2.4.11	Fokus nicht verdeckt (Min.) (AA)	🔍 Manuell prüfen	Die fokussierte Komponente darf nicht vollständig durch Sticky-Header, Overlays oder andere positionierte Seitenelemente verdeckt sein.
3.3.1	Fehlererkennung (A)	🔍 Manuell prüfen	Eingabefehler müssen in Textform identifiziert und dem Nutzer beschrieben werden, nicht nur durch Farbe.
3.3.2	Bezeichnungen oder Anweisungen (A)	🔍 Manuell prüfen	Jedes Formularfeld benötigt ein programmatisch verknüpftes Label oder eine sichtbare Anweisung.
4.1.2	Name, Rolle, Wert (A)	🔍 Manuell prüfen	Name, Rolle und Zustand aller interaktiven UI-Komponenten müssen via nativer HTML-Semantik oder ARIA programmatisch bestimmbar sein.
4.1.3	Statusmeldungen (AA)	🔍 Manuell prüfen	Statusmeldungen (Laden, Erfolg, Fehler, Fortschritt) müssen assistiven Technologien ohne Fokusverschiebung mitgeteilt werden (aria-live oder role='status').

Testabdeckung: 3 jest-axe-Assertion(s) in 4 Testdatei(en) · 0 ARIA-Attribut-Vorkommen im Quellcode-Scan. Kriterien mit 🔍 erfordern manuelle Prüfung im finalen Integrations- und Theme-Kontext.

Storybook

👉 DatePicker in Storybook öffnen

Quellcode

src/components/date-picker/DatePicker.model.ts