<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 Zeichenfolgenwert, der das im Eingabefeld eingetragene Datum darstellt. Das Datum wird gemäß Format für Datumsangaben formatiert.

Sie können einen Standardwert für das Eingabefeld 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 HTMLInputElement value und valueAsNumber abrufen und setzen. 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 auf date gesetzt ist, und legt seinen Wert auf 2017-06-01 (1. Juni 2017) fest. Anschließend wird dieser Wert in Zeichenfolgen- und Zahlenformaten zurückgelesen.

Zusätzliche Attribute

Zusätzlich zu den globalen Attributen und den Input-Attributen, die allen <input>-Elementen gemeinsam sind, unterstützt das date-Input die folgenden Attribute:

max

Das späteste akzeptierte Datum. Wenn der in das Element eingegebene value ein späteres Datum ist, schlägt die Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine mögliche Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element keinen maximalen Datumswert.

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

min

Das früheste akzeptierte Datum. Wenn der in das Element eingegebene value ein früheres Datum ist, schlägt die Einschränkungsvalidierung fehl. Wenn der Wert des min-Attributs keine mögliche Datumszeichenfolge im Format yyyy-mm-dd ist, hat das Element keinen minimalen Datumswert.

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

step

Das step-Attribut ist eine Zahl, die die Granularität spezifiziert, an die der Wert gebunden sein muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die ein ganzzahliges Vielfaches der Schrittgröße vom Schrittbasiswert entfernt sind, sind gültig. Der Schrittbasiswert ist min, falls angegeben, andernfalls value, oder 0 (der Unix-Zeitstempel, 1970-01-01), wenn keiner angegeben ist.

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

Ein Zeichenfolgenwert any bedeutet, dass kein Schritt impliziert ist, und jeder Wert erlaubt ist (außer andere Einschränkungen, wie min und max). In der Praxis hat es die gleiche Wirkung wie 1 für date-Eingaben, da die Auswahl-UI nur die Auswahl ganzer Tage erlaubt.

Verwendung von Datumseingaben

Datenseingaben bieten eine einfache Benutzeroberfläche zur Auswahl von Daten und normalisieren das an den Server gesendete Datenformat unabhängig von der Benutzer-Locale.

In diesem Abschnitt betrachten wir zunächst einfache und dann komplexe Verwendungen von <input type="date">.

Grundlegende Verwendungen von Datum

Die einfachste Verwendung von <input type="date"> besteht aus einem <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 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 Monat- und Jahrteile der Textbox sind nicht bearbeitbar, 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).

Kontrolle der Eingabegröße

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

Validierung

Standardmäßig validiert <input type="date"> den eingegebenen Wert über das Format hinaus nicht. Die Benutzeroberflächen lassen im Allgemeinen nichts zu, was kein Datum ist — was hilfreich ist.

Mit min und max können Sie die verfügbaren Daten einschränken (siehe Festlegen von maximalen und minimalen Daten). Die Formularelemente deaktivieren ungültige Daten und zeigen einen Fehler an, wenn Sie versuchen, ein Datum außerhalb der Grenzen einzureichen.

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

Schauen wir uns ein Beispiel für minimale und maximale Daten an und machen 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) einzureichen, 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 Icon neben dem Eingabefeld 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, da in Chrome zumindest 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 Datumsauswahl mit dem nativen <input type="date">-Piker.

HTML

Das HTML sieht so 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 so 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
• Anleitung zu Datum- und Zeitauswahlelementen
• Datums- und Zeitformate, die in HTML verwendet werden