Zum Hauptinhalt springen
FigmaOpenCode

Input Date

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

Kurzbeschreibung​

Input Date unterstützt Nutzende bei der Eingabe eines Datums.

Beispiele​

Default Date​

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

Readonly Date​

Code anzeigen
<div class="kern-form-input">
<label class="kern-form-input__label" for="date3">Date</label>
<input class="kern-form-input__input" id="date3" name="date3" type="date" readonly>
</div>

Disabled Date​

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="date4">Date</label>
<input class="kern-form-input__input" id="date4" name="date4" type="date" disabled>
</div>

Hint Error Date​

Code anzeigen
<div class="kern-form-input kern-form-input--error">
<label class="kern-form-input__label" for="date6">Date</label>
<div class="kern-form-input__hint" id="date-hint2">Hint Date</div>
<input class="kern-form-input__input kern-form-input__input--error" id="date6" name="date6" type="date" aria-describedby="date-hint2 date-error">
<p class="kern-error" id="date-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 Date akzeptiert die Eingabe eines Datums. Es bietet spezifische Funktionen und Eigenschaften, die die Eingabe und Verarbeitung von Datumsinformationen erleichtern. Daher verfügt das Feld über einen Kalender. Dieser ermöglich es Nutzenden, ein Datum aus einer visuellen Kalenderansicht auszuwählen. Dies reduziert die Wahrscheinlichkeit von Eingabefehlern und verbessert die Benutzerfreundlichkeit. Der Kalender, sowie die Datumseingabe von Input Date nutzen die native Browser-Lösung, um Barrierefreiheit zu gewährleisten.
Input Date akzeptiert die Eingabe eines Datums im Format TT.MM.JJJJ. Dies stellt sicher, dass die Daten konsistent und standardisiert sind, was die Verarbeitung und Speicherung erleichtert.
Es kann alle Zustände default, hover, focus, readonly, disabled, error und error focus annehmen.

Verwendungsregeln​

Input Date wird in Formularen zur Eingabe eines Datums genutzt.

Beispiele:

  • Angabe des Geburtsdatums
  • Angabe des Ablaufdatums der Kreditkarte

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