<input type="date">

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird entsprechend dem Format von Datums-Strings formatiert.

Sie können einen Standardwert für die Eingabe mit einem Datum innerhalb des value Attributs festlegen, wie folgt:

<input type="date" value="2017-06-01" />

Sie können den Datumswert in JavaScript mit den Eigenschaften value und valueAsNumber des HTMLInputElement abrufen und festlegen. Zum Beispiel:

const dateControl = document.querySelector('input[type="date"]');
dateControl.value = "2017-06-01";
console.log(dateControl.value); // prints "2017-06-01"
console.log(dateControl.valueAsNumber); // prints 1496275200000, a JavaScript timestamp (ms)

Dieser Code findet das erste <input> Element, dessen type date ist, und setzt dessen Wert auf 2017-06-01 (1. Juni 2017). Anschließend wird dieser Wert sowohl im String- als auch im Zahlenformat zurückgelesen.

Die allgemeinen Attribute, die für alle <input> Elemente gelten, sind auch für date-Eingaben anwendbar, könnten jedoch deren Darstellung nicht beeinflussen. Zum Beispiel könnten size und placeholder nicht funktionieren. date Eingaben haben die folgenden zusätzlichen Attribute.

Das späteste akzeptierbare Datum. Wenn der in das Element eingegebene value danach erfolgt, schlägt das Element beim Einschränkungsprüfung fehl. Wenn der Wert des max Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen maximalen Datumswert.

Wenn sowohl max als auch min Attribute festgelegt sind, muss dieser Wert ein Datums-String sein, der später oder gleich dem im min Attribut ist.

Das früheste akzeptierbare Datum. Wenn der in das Element eingegebene value vorher passiert, schlägt das Element beim Einschränkungsprüfung fehl. Wenn der Wert des min Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, dann hat das Element keinen minimalen Datumswert.

Wenn sowohl max als auch min Attribute festgelegt sind, muss dieser Wert ein Datums-String sein, der früher oder gleich dem im max Attribut ist.

Das step Attribut ist eine Zahl, die die Granularität angibt, die der Wert einhalten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die gleich dem Basisschritt (min falls angegeben, value ansonsten, und ein angemessener Standardwert, wenn keiner von beiden angegeben ist) sind, sind gültig.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert wird und jeder Wert erlaubt ist (außer anderen Einschränkungen, wie min und max).

Für date Eingaben wird der Wert von step in Tagen angegeben und als eine Anzahl von Millisekunden behandelt, die 86.400.000 mal dem step Wert entspricht (der zugrundeliegende numerische Wert ist in Millisekunden). Der Standardwert von step ist 1, was 1 Tag anzeigt.

Dateneingaben bieten eine einfache Oberfläche zur Auswahl von Daten und normalisieren das an den Server gesendete Datenformat unabhängig von der Lokalisierung des Benutzers.

In diesem Abschnitt betrachten wir grundlegende und dann komplexere Verwendungen von <input type="date">.

Die einfachste Verwendung von <input type="date"> beinhaltet ein <input> zusammen mit seinem <label>, wie unten zu sehen ist:

<form action="https://example.com">
  <label>
    Enter your birthday:
    <input type="date" name="bday" />
  </label>

  <p><button>Submit</button></p>
</form>

Dieses HTML übermittelt das eingegebene Datum unter dem Schlüssel bday an https://example.com — was in einer URL wie https://example.com/?bday=1955-06-08 resultiert.

Sie können die Attribute min und max verwenden, um die vom Benutzer auswählbaren Daten einzuschränken. Im folgenden Beispiel legen wir ein Mindestdatum von 2017-04-01 und ein Höchstdatum von 2017-04-30 fest:

<form>
  <label>
    Choose your preferred party date:
    <input type="date" name="party" min="2017-04-01" max="2017-04-30" />
  </label>
</form>

Das Ergebnis ist, dass nur Tage im April 2017 ausgewählt werden können — die Monats- und Jahresabschnitte des Textfeldes werden nicht bearbeitbar sein, und Daten außerhalb des Aprils 2017 können im Auswahl-Widget nicht ausgewählt werden.

Sie können das Attribut step verwenden, um die Anzahl der Tage zu variieren, die jedes Mal übersprungen werden, wenn das Datum inkrementiert wird (z. B. um nur Samstage auswählbar zu machen).

<input type="date"> unterstützt keine Form-Attributgrößen wie size. Bevorzugen Sie CSS für die Größenanpassung.

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über dessen Format hinaus. Die Schnittstellen lassen in der Regel nichts eingeben, was kein Datum ist — was hilfreich ist.

Wenn Sie min und max verwenden, um verfügbare Daten einzuschränken (siehe Einstellung von maximalen und minimalen Daten), deaktiviert das Form-Element ungültige Daten und zeigt einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der Grenzen zu übermitteln.

Sie können auch das Attribut required verwenden, um das Ausfüllen des Datumsfeldes verpflichtend zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld zu übermitteln.

Sehen wir uns ein Beispiel für minimale und maximale Daten an, und machen wir auch ein Feld erforderlich:

<form>
  <label>
    Choose your preferred party date (required, April 1st to 20th):
    <input
      type="date"
      name="party"
      min="2017-04-01"
      max="2017-04-20"
      required />
    <span class="validity"></span>
  </label>

  <p>
    <button>Submit</button>
  </p>
</form>

Wenn Sie versuchen, das Formular mit einem unvollständigen Datum (oder mit einem Datum außerhalb der festgelegten Grenzen) zu übermitteln, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist das im obigen Beispiel verwendete CSS. Wir nutzen die :valid und :invalid Pseudo-Elemente, um ein Symbol neben der Eingabe hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist oder nicht. Wir mussten das Symbol auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, da zumindest in Chrome der erzeugte Inhalt des Eingabefeldes innerhalb des Form-Elements platziert wird und nicht effektiv gestylt oder angezeigt werden kann.

label {
  display: flex;
  align-items: center;
}

span::after {
  padding-left: 5px;
}

input:invalid + span::after {
  content: "✖";
}

input:valid + span::after {
  content: "✓";
}

In diesem Beispiel erstellen wir einen Datumsauswähler mit dem nativen <input type="date"> Picker.

Das HTML sieht folgendermaßen aus:

<form>
  <div class="nativeDatePicker">
    <label for="bday">Enter your birthday:</label>
    <input type="date" id="bday" name="bday" />
    <span class="validity"></span>
  </div>
</form>

Das CSS sieht folgendermaßen aus:

input:invalid + span::after {
  content: " ✖";
}

input:valid + span::after {
  content: " ✓";
}

• Das generische <input> Element und die Schnittstelle zur Manipulation, HTMLInputElement
• Datum- und Uhrzeit-Picker Tutorial
• Im HTML verwendete Datums- und Zeitformate