Zum Hauptinhalt springen
FigmaOpenCode

Input DateTime

Synonyme: Datumswähler, Date picker, Date, Calendar-Date-Picker, Datum-Eingabefeld
Ähnliche Komponenten: Input E-Mail, Input Password, Input Text

Hinweis

Die Komponente ist bereits einsatzbereit, jedoch fehlt noch die Dokumentation. Du kannst sie trotzdem schon verwenden – die Dokumentation wird in Kürze ergänzt.

Kurzbeschreibung​

Input DateTime unterstützt Nutzende bei der Eingabe eines Datums mit Zeit.

Beispiele​

Default DateTime​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="datetime-local">DateTime</label>
<input class="kern-form-input__input" id="datetime-local" name="datetime-local" type="datetime-local">
</div>

Readonly DateTime​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="datetime-local3">DateTime</label>
<input class="kern-form-input__input" id="datetime-local3" name="datetime-local3" type="datetime-local" readonly>
</div>

Disabled DateTime​

Achtung

Vermeide disabled, da es die Zugänglichkeit einschränkt. Weitere Informationen zur Barrierefreiheit

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="datetime-local4">DateTime</label>
<input class="kern-form-input__input" id="datetime-local4" name="datetime-local4" type="datetime-local" disabled>
</div>

Hint Error DateTime​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="datetime-local6">DateTime</label>
<div class="kern-form-input__hint" id="datetime-local-hint2">Hint DateTime</div>
<input class="kern-form-input__input kern-form-input__input--error" id="datetime-local6" name="datetime-local6" type="datetime-local" aria-describedby="datetime-local-hint2 date-error">
<p class="kern-error" id="datetime-local-error" role="alert">
  <span class="kern-icon kern-icon--danger kern-icon--md" aria-hidden="true"></span>
  <span class="kern-text">Das Datum darf nicht leer sein</span>
</p>
</div>

Beschreibung​

Hinweis

Für Input Date gelten die allgemein beschriebenen Eigenschaften eines Inputs, wie z.B. Zustände (states) oder Dos and Don’ts.

Input DateTime ermöglicht die Eingabe eines Datums und einer Uhrzeit. Es bietet spezielle Funktionen und Eigenschaften, die die Eingabe und Verarbeitung von Datums- und Zeitinformationen erleichtern. Das Feld enthält eine kombinierte Kalender- und Zeitansicht, die es Nutzenden ermöglicht, ein Datum und eine Uhrzeit aus einer visuellen Übersicht auszuwählen. Dies reduziert die Wahrscheinlichkeit von Eingabefehlern und verbessert die Benutzerfreundlichkeit. Die Kalender- und Zeitauswahl von Input DateTime nutzt die native Browser-Lösung, um Barrierefreiheit sicherzustellen.

Input DateTime akzeptiert die Eingabe im Format TT.MM.JJJJ SS:MM. Dieses Format stellt sicher, dass die Daten konsistent und standardisiert sind, was die Verarbeitung und Speicherung vereinfacht.
Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Input DateTime wird in Formularen zur Eingabe eines Datums mit Uhrzeit genutzt.

Beispiele:

  • Planung eines Termins: Auswahl von Datum und Uhrzeit für ein Meeting oder eine Veranstaltung.

Dos und Don’ts​

Barrierefreiheit​

Diese Komponente erfüllt die formalen Eigenschaften – Schriftgröße, Kontrastverhältnis – für barrierefreie Dienste.
Siehe auch: Hinweise zur Barrierefreiheit für Input und BFIT Handreichungen.

Inhaltsverzeichnis