DatePicker Datumsauswahl
Einführung
Ein interaktives Formularsteuerelement, das ein Texteingabefeld mit einer Popup-Kalender-Überlagerung kombiniert. Es unterstützt Einzel-Datumsauswahl, Datumsbereichsauswahl, Multi-Select-Umschalter, benutzerdefinierte Kalendergrenzen, lokalisierte Wochentags-Überschriften und Tastaturnavigation.
Der DatePicker ist vollständig als datePicker-Block im Page Builder integriert und ermöglicht es Inhaltsmanagern und Entwicklern, Textlabels, Platzhalter-Formatierung, Auswahlmodi und Akzent-Farbthemen direkt in Sveltia-CMS-Seitenvorlagen zu definieren.
Verwendung
Diese Konfigurationen zeigen genau, wie Seiten-Builder-Blockelemente konstruiert werden.
1. Einzel-Datumsauswahl (Unkontrolliert / Standard)
Unser Standard-Datumsauswahl-Layout, das Benutzern die Auswahl eines einzelnen, bestimmten Datums aus dem Kalender-Dropdown ermöglicht. Nützlich für Formulare, Registrierungen oder terminierte Buchungen.
{
"type": "datePicker",
"label": "Choose Date",
"selectionMode": "single",
"placeholder": "YYYY-MM-DD",
"colorPalette": "blue",
"interactive": true
}
2. Reisebereich-Auswahl (Begrenzter Kalender)
Beschränkt auswählbare Kalendergrenzen zwischen bestimmten Daten. Hervorragend für Flugauswahl, Hotelbuchungen oder Abrechnungsfenster. Das Setzen von selectionMode auf "range" rendert Start- und End-Eingaben.
{
"type": "datePicker",
"label": "Travel Dates",
"selectionMode": "range",
"min": "2026-01-01",
"max": "2026-12-31",
"colorPalette": "purple",
"interactive": true
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / Unterstützte Optionen |
|---|---|---|---|
Label-Text (label) | string | - | Formular-beschreibender Label-Text, der neben dem Texteingabefeld gerendert wird. |
Platzhalter (placeholder) | string | "YYYY-MM-DD" | Leitfaden-Formattext, der im Texteingabefeld angezeigt wird, wenn es leer ist. |
Auswahlmodus (selectionMode) | select | "single" | Definiert, wie Daten erfasst werden. • "single" — Löst ein einzelnes Datum auf. • "range" — Löst einen übergreifenden Block auf (erstellt Doppeleingaben). • "multiple" — Schaltet mehrere unabhängige Tage um. |
Mindestdatum (min) | string | - | Das früheste auswählbare Datum im YYYY-MM-DD-ISO-Format. Vorangehende Zellen sind deaktiviert. |
Höchstdatum (max) | string | - | Das späteste auswählbare Datum im YYYY-MM-DD-ISO-Format. |
Wochennummern anzeigen (showWeekNumbers) | boolean | false | Wenn true, rendert eine ISO-8601-Wochennummern-Spalte entlang der linken Kante des Tag-Rasters. |
Farbschema (colorPalette) | select | "blue" | Visuelles Theme, angewendet auf ausgewählte Tage, Heute-Hervorhebungen und aktive Grenzen. • Optionen: blue, green, red, purple, orange, amber, cyan, slate. |
Hydration aktivieren (interactive) | boolean | true | Wenn true, hydriert die Komponente als Insel, um Kalender-Popups und Klicks außerhalb zu handhaben. |
Tastatur- & Barrierefreiheitsunterstützung
Wenn das Kalender-Panel-Overlay geöffnet ist und der Fokus darin liegt, können Benutzer Auswahlen vollständig über Standard-Tastaturtasten steuern:
- ← / → — Fokus auf die vorherige oder nächste Tag-Zelle verschieben.
- ↑ / ↓ — Fokus um ±1 Woche (7 Tage) vertikal bewegen.
- PageUp / PageDown — Kalenderansicht um einen vollen Monat vorrücken oder zurückspulen.
- Shift+PageUp / Shift+PageDown — Um ein volles Jahr vorrücken oder zurückspulen.
- Enter / Space — Die aktive fokussierte Tag-Zelle auswählen und bestätigen.
- Esc — Das Popup-Overlay sofort schließen und den Fokus zurück auf das Trigger-Eingabefeld lenken.
Unter der Haube nutzt das Tag-Raster wandernde tabIndex-Fokusstopps, um das Tabben durch jeden einzelnen Kalendertag zu verhindern. Alle Zell-Raster geben korrekte semantische Screenreader-Beschreibungen aus (role="grid", aria-multiselectable, aria-current="date").