DatePicker

Datumswahl mit nativem <input type="date"> für Formular-Submission und einem barrierefreien Kalender-Popover zur visuellen Auswahl. Unterstützt Tastaturnavigation, Bereichseinschränkung und Screenreader-Announcements.

Standard

Einfacher DatePicker ohne voreingestellten Wert. Der Trigger zeigt einen Platzhaltertext, bis ein Datum gewählt wird.

Standard-Datumswahl

Geburtsdatum

Einzugsdatum

<DatePicker
  label="Geburtsdatum"
  name="birthday"
/>
<DatePicker
  label="Einzugsdatum"
  name="move-in"
  required
/>

Mit Vorauswahl

Ein voreingestellter Wert im ISO-Format (YYYY-MM-DD) wird direkt im Trigger angezeigt und im Kalender markiert.

Vorausgefülltes Datum

Vertragsbeginn

<DatePicker
  label="Vertragsbeginn"
  name="contract-start"
  value="2026-04-01"
/>

Mit Bereichseinschränkung

Über min und max wird der waehlbare Bereich eingegrenzt. Tage außerhalb des Bereichs sind ausgegraut und nicht anwählbar.

Eingeschränkter Zeitraum

Ablesetermin

Verfügbar: März bis Juni 2026

<DatePicker
  label="Ablesetermin"
  name="reading-date"
  min="2026-03-01"
  max="2026-06-30"
  hint="Verfügbar: März bis Juni 2026"
/>

Zustände

Fehlermeldungen, Hinweistexte und deaktivierte Felder verhalten sich konsistent zu anderen Formularkomponenten.

Fehler, Hinweis und Deaktiviert

Kuendigungsdatum

Bitte wählen Sie ein gueltiges Datum.

Wunschtermin

Fruehestens 5 Werktage ab heute.

Vertragsende

<DatePicker
  label="Kuendigungsdatum"
  name="cancel-date-err"
  error="Bitte wählen Sie ein gueltiges Datum."
/>
<DatePicker
  label="Wunschtermin"
  name="preferred-date"
  hint="Fruehestens 5 Werktage ab heute."
/>
<DatePicker
  label="Vertragsende"
  name="contract-end"
  value="2026-12-31"
  disabled
/>

Installation

cp-components add datepicker