Zum Hauptinhalt springen

Input Time

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 Time unterstützt Nutzende bei der Eingabe einer Uhrzeit.

Beispiele​

Default Time​

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

Readonly Time​

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

Disabled Time​

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="time4">DateTime</label>
<input class="kern-form-input__input" id="time4" name="time4" type="time" disabled>
</div>

Hint Error Time​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="time6">DateTime</label>
<div class="kern-form-input__hint" id="time-hint2">Hint Time</div>
<input class="kern-form-input__input kern-form-input__input--error" id="time6" name="time6" type="time" aria-describedby="time-hint2 date-error">
<p class="kern-error" id="time-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 Time ermöglicht die Eingabe einer Uhrzeit. Es bietet spezielle Funktionen und Eigenschaften, die die Eingabe und Verarbeitung von Zeitinformationen erleichtern. Das Feld enthält eine Zeitansicht, die es Nutzenden ermöglicht, eine Uhrzeit aus einer visuellen Übersicht auszuwählen. Dies reduziert die Wahrscheinlichkeit von Eingabefehlern und verbessert die Benutzerfreundlichkeit. Die Zeitauswahl von Input Time nutzt die native Browser-Lösung, um Barrierefreiheit sicherzustellen.

Input Time akzeptiert die Eingabe im Format 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 Time wird in Formularen zur Eingabe einer Uhrzeit genutzt.

Beispiele:

  • Planung eines Termins: Auswahl der Uhrzeit für ein Meeting oder einer 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