FORMULARE / KALENDER
Ein Datum. Keine Umwege.
Ein optionaler Kalender für native Datumsfelder. Deutsche und englische Beschriftungen, inklusive Grenzen und Tastaturbedienung. Die native Eingabe bleibt sichtbar und funktioniert auch ohne das Modul.
Datum auf Deutsch und Englisch auswählen
Die Kalender schreiben ausschließlich ISO-Werte wie 2026-10-23 in das originale Datumsfeld. Der deutsche Kalender beginnt montags, der englische sonntags. Die Oberfläche des nativen Feldes folgt zusätzlich deinem Browser und Betriebssystem.
Nur lokale Vorschau. Es werden keine Daten versendet oder gespeichert.
<link rel="stylesheet" href="https://ui.rittek.de/assets/rittek.css">
<link rel="stylesheet" href="https://ui.rittek.de/assets/calendar.css">
<label class="r-label" for="appointment">Termin *</label>
<input class="r-input" type="date" id="appointment"
name="appointment" required
value="2026-10-23"
min="2026-01-01" max="2027-12-31"
data-r-calendar data-r-locale="de">
<script type="module">
import {initCalendars}
from 'https://ui.rittek.de/assets/modules/calendar.js';
const calendars = initCalendars(document);
// calendars.destroy();
</script>API und Lebenszyklus
Für ein einzelnes Feld kann die Anwendung die Kalenderinstanz direkt verwalten. Nach Änderungen an nativen Werten oder Grenzen synchronisiert sync() die zusätzliche Oberfläche.
import {createCalendar}
from 'https://ui.rittek.de/assets/modules/calendar.js';
const input = document.getElementById('appointment');
const calendar = createCalendar(input, {
locale: 'de', // 'de' oder 'en'
weekStartsOn: 1 // optional: Sonntag = 0, Montag = 1
});
calendar.open();
calendar.close();
input.value = '2026-11-02';
calendar.sync();
calendar.getState(); // {open, value, focused, month, locale, weekStartsOn}
input.addEventListener('rittek:calendarchange', event => {
console.log(event.detail.value); // ISO-Datum oder leerer String
});
calendar.destroy(); // entfernt nur die zusätzliche Oberfläche
// Native Eingabe, Wert und Constraints bleiben erhalten.
// Erneutes createCalendar(input) räumt eine frühere Instanz auf.Tastatur und Grenzen
- Pfeil links/rechts: vorheriger/nächster Tag; Pfeil auf/ab: vorherige/nächste Woche.
- Home/End: Anfang/Ende der angezeigten Woche.
- Bild auf/ab: vorheriger/nächster Monat; mit Umschalt: vorheriges/nächstes Jahr.
- Enter oder Leertaste: fokussiertes Datum auswählen.
- Escape: Dialog schließen und Fokus zum Auslöser zurückgeben.
- Tab: native Fokusführung innerhalb des Dialogs.
Die min-/max-Grenzen sind inklusive. Nicht verfügbare Tage und vollständig außerhalb liegende Monate sind deaktiviert. Tastaturbewegungen werden an den Grenzen begrenzt. Ein leeres Feld startet beim tatsächlichen lokalen Tagesdatum, gegebenenfalls auf den erlaubten Bereich begrenzt.
Das native Datumsfeld bleibt sichtbar, behält required, min, max und seinen Namen. Die Anwendung kann native input- und change-Ereignisse sowie rittek:calendaropen, rittek:calendarclose und rittek:calendarchange abonnieren. Direkt per JavaScript gesetzte Werte lösen keine nativen Ereignisse aus; danach sync() aufrufen.
Umfang des Moduls
Einzelauswahl von Tagen in den Jahren 0001–9999, keine Zeitwahl oder Datumsintervalle. Die Berechnung erfolgt mit gregorianischen Tagesnummern, ohne Datum-zu-UTC-Umwandlung. Das vermeidet Tagverschiebungen durch Zeitzonen. Monatsbewegungen behalten den Tag soweit möglich; etwa der 31. Januar wird im Februar auf dessen letzten Tag begrenzt.
Die zusätzliche Oberfläche setzt native Dialogunterstützung voraus; andernfalls bleibt die native Eingabe als Fallback verfügbar. Neue Eingabefelder benötigen eine Initialisierung. Dynamische Änderungen an disabled, readonly, min/max und an deaktivierten übergeordneten Fieldsets werden beobachtet. Ein natives step-Attribut wird bei der Auswahl erneut geprüft, aber nicht als eigenes Muster im Raster markiert.
Die Demo verwendet method="dialog" und einen lokalen Submit-Handler. Es erfolgen keine Speicherung und kein Versand. Für echte Formulare bleiben serverseitige Validierung und Speicherung Aufgabe der Anwendung.