Eingabefelder: Calendar

Zurück: Demo-Übersicht

Das Kalenderfeld baut auf dem nativen Datumsfeld des Browsers auf – kein nachgebautes Kalendergitter. Diese Seite zeigt Format, Grenzen und den Weg ohne JavaScript.

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/max sind 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