<input type="date"> HTML-Attributwert - HTML | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

<input type="date"> HTML-Attributwert

Baseline Weitgehend verfügbar *

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit April 2021 browserübergreifend verfügbar.

* Einige Teile dieser Funktion werden möglicherweise unterschiedlich gut unterstützt.

<input>-Elemente mit type="date" erzeugen Eingabefelder, die es dem Benutzer ermöglichen, ein Datum einzugeben. Die Darstellung der Datumsauswahloberfläche variiert je nach Browser und Betriebssystem. Der Wert ist standardmäßig im Format yyyy-mm-dd normalisiert.

Der resultierende Wert enthält das Jahr, den Monat und den Tag, jedoch nicht die Zeit. Die Eingabetypen time und datetime-local unterstützen die Eingabe von Zeit und Datum+Zeit.

In diesem Artikel

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:

html

Hinweis: Das angezeigte Datumsformat wird von dem tatsächlichen value abweichen — das angezeigte Datum wird basierend auf der Lokalisierung des Browsers des Benutzers formatiert, aber der geparste value ist immer im Format yyyy-mm-dd.

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

js
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.

Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schritt-Konfiguration entsprechen, kann der Benutzeragent auf den nächsten gültigen Wert runden, wobei Zahlen in positiver Richtung bevorzugt werden, wenn es zwei gleich naheliegende Optionen gibt.

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:

html
<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:

html
<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:

html
<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.

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

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

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

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

Warnung: Client-seitige Formularvalidierung ist kein Ersatz für die Validierung auf dem Server. Es ist einfach für jemanden, das HTML zu ändern oder Ihr HTML vollständig zu umgehen und die Daten direkt an Ihren Server zu senden. Wenn Ihr Server es versäumt, die empfangenen Daten zu validieren, könnte es zu einem Desaster mit schlecht formatierten, zu großen, falschen Datentypen usw. kommen.

Beispiele

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

HTML

Das HTML sieht wie folgt aus:

html
<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:

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

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

Ergebnisse

Technische Zusammenfassung

Wert	Ein String, der ein Datum im YYYY-MM-DD Format oder leer darstellt
Ereignisse	[`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event)
Unterstützte allgemeine Attribute	autocomplete, list, readonly, step
IDL-Attribute	value, valueAsDate, valueAsNumber
DOM-Schnittstelle	[`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement)
Methoden	[`select()`](/de/docs/Web/API/HTMLInputElement/select), [`stepDown()`](/de/docs/Web/API/HTMLInputElement/stepDown), [`stepUp()`](/de/docs/Web/API/HTMLInputElement/stepUp)
Implizite ARIA-Rolle	keine entsprechende Rolle

Das generische <input>-Element und die Schnittstelle zur Manipulation, HTMLInputElement
Datum- und Zeitauswahl-Tutorial
Datum- und Zeitformate in HTML

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden