<input type="date">

Probieren Sie es aus

<label for="start">Start date:</label>

<input
  type="date"
  id="start"
  name="trip-start"
  value="2018-07-22"
  min="2018-01-01"
  max="2018-12-31" />

label {
  display: block;
  font:
    1rem "Fira Sans",
    sans-serif;
}

input,
label {
  margin: 0.4rem 0;
}

Wert

Ein String, der das im Eingabefeld eingegebene Datum darstellt. Das Datum wird gemäß dem Datumsformat formatiert.

Sie können einen Standardwert für die Eingabe mit einem Datum im value-Attribut festlegen, wie hier gezeigt:

<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). Dann liest er diesen Wert in String- und Zahlformaten zurück.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Eingabe-Attributen, die allen <input>-Elementen gemein sind, unterstützt das date-Eingabefeld folgende Attribute:

max

Das späteste zu akzeptierende Datum. Wenn der im Element eingegebene value danach liegt, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des max-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, hat das Element keinen maximalen Datumswert.

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

min

Das früheste zu akzeptierende Datum. Wenn der im Element eingegebene value vorher liegt, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des min-Attributs kein mögliches Datums-String im Format yyyy-mm-dd ist, hat das Element keinen minimalen Datumswert.

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

step

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden sein muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Zahl von Schritten vom Schrittgrund entfernt sind, sind gültig. Der Schrittgrund ist min, falls angegeben, ansonsten value, oder 0 (die Unix-Epoche, 1970-01-01), falls keiner vorhanden ist.

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

Ein String-Wert von any bedeutet, dass kein Schrittzwang impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max). Tatsächlich hat es die gleiche Wirkung wie 1 für date-Eingaben, da die Auswahlanzeige nur die Auswahl ganzer Tage erlaubt.

Verwendung von Datumseingaben

Datumseingaben bieten eine einfache Möglichkeit zur Auswahl von Daten und normieren das Format der an den Server gesendeten Daten unabhängig vom Standort des Benutzers.

In diesem Abschnitt betrachten wir einfache und dann komplexere Anwendungsfälle von <input type="date">.

Einfache Verwendung von Datum

Die einfachste Verwendung von <input type="date"> beinhaltet ein <input> kombiniert mit seinem <label>, wie unten gezeigt:

<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 zu einer URL wie https://example.com/?bday=1955-06-08 führt.

Festlegung von maximalen und minimalen Daten

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

<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 Jahresangaben des Textfeldes sind nicht editierbar, und Daten außerhalb des Aprils 2017 können im Auswahlanzeige-Widget nicht ausgewählt werden.

Sie können das step-Attribut verwenden, um die Anzahl der Tage zu variieren, die bei jeder Erhöhung des Datums übersprungen werden (z. B. um nur Samstage wählbar zu machen).

Steuerung der Eingabegröße

<input type="date"> unterstützt keine Formgrößenattribute wie size. Verwenden Sie CSS, um es zu skalieren.

Validierung

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

Wenn Sie min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Festlegung von maximalen und minimalen Daten), deaktiviert das Formularelement ungültige Daten und zeigt einen Fehler an, wenn Sie versuchen, ein Datum einzugeben, das außerhalb der Grenzen liegt.

Sie können auch das required-Attribut verwenden, um das Ausfüllen des Datums zwingend zu machen — ein Fehler wird angezeigt, wenn Sie versuchen, ein leeres Datumsfeld einzureichen.

Werfen wir einen Blick auf ein Beispiel zu Mindest- und Höchstdaten, und machen wir 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) abzuschicken, zeigt der Browser einen Fehler an. Probieren Sie jetzt das Beispiel aus:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Wir verwenden die :valid und :invalid Pseudo-Elemente, um ein Symbol neben dem Eingabefeld hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Symbol auf einem <span> neben dem Eingabefeld platzieren, nicht auf dem Eingabefeld selbst, da zumindest im Chrome der generierte Inhalt des Eingabefeldes innerhalb der Formularkontrolle platziert wird und nicht effektiv gestylt oder gezeigt werden kann.

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

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

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

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

Beispiele

In diesem Beispiel erstellen wir einen Datumsauswahldialog mit dem nativen <input type="date">-Picker.

HTML

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>

CSS

Das CSS sieht folgendermaßen aus:

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

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

Ergebnisse

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das generische <input>-Element und die Schnittstelle zur Manipulation, HTMLInputElement
• Datum und Zeit Auswahl Tutorial
• In HTML verwendete Datums- und Zeitformate