source

DatePicker

Date picker with calendar popup. Supports single date and date range selection, validation constraints, clearable input, and multiple visual variants.

Datum

Input Variant

Calendar Variant

Clearable

Week Numbers

Disabled

Required

Size

Loading syntax highlighting...

01 Examples

Basic DatePicker

Einfache Datumsauswahl mit Label und Kalender-Popover. Klicke auf das Input, um den Kalender zu oeffnen. Das gewaehlte Datum wird formatiert angezeigt.

Geburtsdatum

Loading syntax highlighting...

DateRangePicker

Zeitraum-Auswahl mit zwei Klicks: Start- und Enddatum. Das Popover schliesst automatisch nach Auswahl beider Daten. Ideal fuer Buchungen und Filter.

Reisezeitraum

Loading syntax highlighting...

With Constraints

Einschraenkungen via minDate, maxDate, disabledDates und isDateDisabled. Hier sind nur Werktage im Maerz 2026 waehlbar – Wochenenden und Feiertage sind gesperrt.

Terminbuchung

Nur Werktage im Maerz 2026, keine Feiertage.

Loading syntax highlighting...

Sizes

Alle fuenf Groessen im Ueberblick: xs, sm, md, lg, xl. Die Groesse beeinflusst Input und Kalender-Popup gleichermassen.

Datum (xs)

Datum (sm)

Datum (md)

Datum (lg)

Datum (xl)

Loading syntax highlighting...

Variants

Kalender-Varianten (default, bordered, ghost) und Input-Varianten (outlined, filled, ghost, underline) lassen sich unabhaengig kombinieren.

Kalender-Varianten

Kalender: default

Kalender: bordered

Kalender: ghost

Input-Varianten

Input: outlined

Input: filled

Input: ghost

Input: underline

Loading syntax highlighting...

With Week Numbers

ISO-Kalenderwochen in der linken Spalte des Kalenders – nuetzlich fuer Projektplanung und Liefertermine.

Lieferdatum

Loading syntax highlighting...

Clearable

Standardmaessig kann das Datum ueber das X-Icon geloescht werden. Mit clearable={false} wird die Loeschfunktion deaktiviert.

Clearable (Standard)

Nicht clearable

Loading syntax highlighting...

02 Accessibility

ARIA Roles

Das Trigger-Input hat aria-haspopup="dialog" und aria-expanded, um den Popover-Status zu kommunizieren. Der eingebettete Kalender nutzt role="grid" mit vollstaendiger ARIA-Unterstuetzung.

Keyboard Navigation

Enter, Space oder ArrowDown oeffnen den Kalender. Escape schliesst ihn. Im Kalender navigieren Pfeiltasten zwischen Tagen/Wochen, PageUp/PageDown zwischen Monaten. Fokus-Ringe nutzen focus-visible: fuer reine Keyboard-Sichtbarkeit.

Screen Reader Labels

Das Label wird ueber das Input an den Screen Reader weitergegeben. Alle Tageszellen im Kalender haben ein aria-label mit dem vollstaendigen Datum (z.B. "Donnerstag, 12. Maerz 2026"). Fehler- und Hilfstexte werden via aria-describedby verknuepft.

Internationalisierung

Datumsformatierung nutzt natives Intl.DateTimeFormat mit der konfigurierten locale. Wochentage, Monatsnamen und das Eingabeformat passen sich automatisch an die Sprache an.

03 API Reference

35 props

No matching properties

No matching properties

04 Installation

Import

Loading syntax highlighting...

llm.txt