<input type="date"> HTML-Attributwert

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 ist formatiert nach Datumsformatierung.

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 Datumwert in JavaScript mit den Eigenschaften HTMLInputElement value und valueAsNumber 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 sucht das erste <input>-Element, dessen type date ist, und setzt seinen Wert auf 2017-06-01 (1. Juni 2017). Danach wird dieser Wert im String- und Zahlformat zurückgelesen.

Zusätzliche Attribute

Zusätzlich zu globalen Attributen und den für alle <input>-Elemente gemeinsamen Eingabe-Attributen, unterstützt die Datumseingabe die folgenden Attribute:

max

Das späteste zu akzeptierende Datum. Wenn der in das Element eingegebene value später liegt, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des max-Attributs keine gültige Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element keinen maximalen Datumswert.

Wenn sowohl max- als auch min-Attribute gesetzt sind, muss dieser Wert eine Datumszeichenfolge später oder gleich dem im min-Attribut sein.

min

Das früheste zu akzeptierende Datum. Wenn der in das Element eingegebene value früher liegt, schlägt die Einschränkungsvalidierung des Elements fehl. Wenn der Wert des min-Attributs keine gültige Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element keinen minimalen Datumswert.

Wenn sowohl max- als auch min-Attribute gesetzt sind, muss dieser Wert eine Datumszeichenfolge früher oder gleich dem im max-Attribut sein.

step

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

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

Ein String-Wert von any bedeutet, dass kein Schrittanzug impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max). In der Realität hat es die gleiche Wirkung wie 1 für date-Eingaben, da die Auswahloberfläche nur die Auswahl ganzer Tage erlaubt.

Verwendung von Datumseingaben

Datumseingaben bieten eine einfache Schnittstelle zur Auswahl von Daten und normalisieren das an den Server gesendete Datenformat, unabhängig von der Lokalisierung des Benutzers.

In diesem Abschnitt betrachten wir die grundlegenden und dann komplexeren Anwendungen von <input type="date">.

Grundlegende Anwendungen von Datum

Die grundlegendste Verwendung von <input type="date"> umfasst ein <input> in Kombination 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 sendet 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.

Festlegen von maximalen und minimalen Daten

Sie können die Attribute min und max verwenden, um die vom Benutzer wä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 Monate- und Jahrteile des Textfeldes sind nicht editierbar, und Daten außerhalb des April 2017 können im Auswahl-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 auswählbar zu machen).

Steuerung der Eingabebreite

<input type="date"> unterstützt keine Formulargroßenattribute wie size. Verwenden Sie lieber CSS, um es zu dimensionieren.

Validierung

Standardmäßig validiert <input type="date"> den eingegebenen Wert nicht über sein Format hinaus. Die Schnittstellen lassen normalerweise nicht zu, dass etwas anderes als ein Datum eingegeben wird — was hilfreich ist.

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

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

Schauen wir uns ein Beispiel für Mindest- und Höchstdaten an und machen zusätzlich 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) einzureichen, zeigt der Browser einen Fehler an. Spielen Sie jetzt mit dem Beispiel herum:

Hier ist das in dem obigen Beispiel verwendete CSS. Wir verwenden die :valid und :invalid Pseudo-Elemente, um ein Icon neben der Eingabe hinzuzufügen, basierend darauf, ob der aktuelle Wert gültig ist. Wir mussten das Icon auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, weil in Chrome mindestens der generierte Inhalt der Eingabe innerhalb des Formularelements 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: "✓";
}

Beispiele

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

HTML

Das HTML sieht wie folgt 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 wie folgt 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 Zeitauswahl-Tutorial
• Datum- und Zeitformate in HTML