Eingabefelder: Calendar
Zurück: Demo-Übersicht
1. Übersicht und Zweck
Status: [Live]. Referenz: DevExpress ASPxCalendar
(MinDate/MaxDate/DisabledDates/FirstDayOfWeek/
EnableMultiSelect/ShowClearButton).
2. Voraussetzungen
Gemeinsamer Feld-Kontrakt bereits verstanden.
3. Konzepte
No-JS-Basis: natives <input type="date">. Der Vertrag baut auf
dem nativen Browser-Datepicker auf — kein JS-Kalendergitter wird
nachgebaut. scripts/formfields.js darf das native Control
progressiv ergänzen (z. B. Mehrfachauswahl, die
<input type="date"> nicht kennt), ersetzt es aber nie.
4. Erste Schritte
echo $widgets->calendar([ 'name' => 'stichtag', 'label' => 'Stichtag', 'min' => '2026-01-01', 'max' => '2026-12-31', ]);
5. Verwendung
Einzelnes Datum ohne Zeitanteil. Für Zeitpunkte: Date and Time.
6. API-Referenz
calendar(array $opts): string in helper_plugin_wkfluentui_widgets
— natives <input type="date">, kein
Kalendergitter-Nachbau.
7. Parameter, Optionen und Zustände
| Schlüssel | Typ | Bedeutung | DevExpress-Analog |
|---|---|---|---|
min | string (ISO-Datum) | natives min-Attribut | MinDate |
max | string (ISO-Datum) | natives max-Attribut | MaxDate |
disabledDates | array | ohne natives Äquivalent — rendert data-wk-disabled-dates; scripts/formfields.js meldet ein gesperrtes Datum per setCustomValidity — reine Client-Höflichkeit, der Server muss erneut prüfen (kein Browser erzwingt Lücken) | DisabledDates |
multiSelect | bool | Mehrfachauswahl ohne Kalendergitter-Nachbau: natives Datumsfeld + „Datum hinzufügen„-Button sammelt Werte als Chips mit Hidden-Feldern name[] (Entfernen je Chip); values-Array setzt die Vorauswahl. No-JS-Fallback: das Feld degradiert auf ein einzelnes <input type="date"> mit name | EnableMultiSelect |
Der Wochenstart des nativen Datepickers folgt der Browser-/OS-Locale — ein
konfigurierbarer FirstDayOfWeek ist bewusst nicht Teil des Vertrags
(kein Kalendergitter-Nachbau, s. Abschnitt 3).
Sicherheit: disabledDates und multiSelect können nicht allein
über natives HTML durchgesetzt werden — der Server muss
serverseitig erneut validieren, nicht nur clientseitig (kein Browser
erzwingt Lücken oder Mehrfachauswahl-Grenzen).
8. Vollständige Beispiele
echo $widgets->calendar([ 'name' => 'termin', 'label' => 'Termin', 'min' => date('Y-m-d'), ]);
9. Einschränkungen und Randfälle
- Kein konfigurierbarer Wochenstart (Abschnitt 7 — Browser-Locale entscheidet).
- Zeitzonen-Handling ist bewusst außerhalb des Vertrags:
value/min/maxsind reine Datums-Strings (kein Zeitanteil).
10. Accessibility und Kompatibilität
Vollständiger Überblick: Accessibility.
11. Troubleshooting
Entfällt.
12. Verwandte Themen
- Demo-Übersicht — alle Kategorien
- Eingabefelder: Date and Time — Zeitpunkt statt reines Datum
- Eingabefelder: Grundlagen — gemeinsamer Feld-Kontrakt