Datum und Uhrzeit

Die Eingabefelder für Datum und Uhrzeit erleichtern die standardisierte und intuitive Eingabe von Datums- und Zeitangaben. Diese Komponenten sorgen für eine präzise und konsistente Dateneingabe und bieten durch visuelle Hilfen eine nutzerfreundliche Fehlervermeidung.

Datum

Pflichtfeld

Das <input> Element enthält ein required Attribut.

<div class="element-date form-group">
  <div class="form-floating">
    <input type="date" id="date" class="form-control" name="date" required />
    <label for="date"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Optional

<div class="element-date form-group">
  <div class="form-floating">
    <input type="date" id="date-2" class="form-control" name="date-2" />
    <label for="date-2"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Vorbefüllt

Das <input> Element enthält ein befülltes value Attribut.

<div class="element-date form-group">
  <div class="form-floating">
    <input
      type="date"
      id="date-3"
      class="form-control"
      name="date-3"
      value="2024-09-30"
    />
    <label for="date-3"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Disabled

Das <input> Element enthält ein disabled Attribut.

<div class="element-date form-group">
  <div class="form-floating">
    <input
      type="date"
      id="date-4"
      class="form-control"
      name="date-4"
      disabled
    />
    <label for="date-4"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Datum Eingabefelder können optional mit einem Tooltip ergänzt werden. Dieser wird durch ein Icon gekennzeichnet. Der Text kann sowohl mehrzeilig sein, als auch einen Link enthalten und ist bei Hover ersichtlich.

<div class="element-date form-group element-tooltip">
  <div class="form-floating">
    <svg
      class="icon icon-info"
      data-bs-custom-class="wko-tooltip"
      data-bs-toggle="tooltip"
      data-bs-html="true"
      data-bs-title="Tooltip, dieser kann sowohl mehrzeilig sein, als auch einen <a href='#'>Link</a> enthalten."
    >
      <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-info"></use>
    </svg>
    <input type="date" id="date-5" class="form-control" name="date-5" />
    <label for="date-5"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
</div>

Infotext

Datum Eingabefelder können optional mit einem Infotext unterhalb des Eingabefeldes ergänzt werden.

<div class="element-date form-group">
  <div class="form-floating">
    <input type="date" id="date-6" class="form-control" name="date-6" />
    <label for="date-6"> Label </label>
    <div class="invalid-feedback">Individuelle Fehlermeldung</div>
    <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
  </div>
  <p class="infotext">Infotext ergänzend zum Eingabefeld</p>
</div>

Validierung

Uhrzeit