Sie befinden sich hier: start » de » Interne Dokumentation » DokuWiki-Erweiterungen (WvdS) » FluentUI (Design-System-Bibliothek) » FluentUI: Komponenten-Referenzen » FluentUI: Eingabefelder — Demo-Übersicht » Eingabefelder: Calendar

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/max sind reine Datums-Strings (kein Zeitanteil).

10. Accessibility und Kompatibilität

Vollständiger Überblick: Accessibility.

11. Troubleshooting

Entfällt.

12. Verwandte Themen

de/wiki/dwe/wkfluentui/component/form-fields/calendar.txt · Zuletzt geändert: von 0.0.0.0