HTML-Attributwert für <input type="month">

Probieren Sie es aus

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

<input type="month" id="start" name="start" min="2018-03" value="2018-05" />

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

input,
label {
  margin: 0.4rem 0;
}

Wert

Eine Zeichenfolge, die den in das Eingabefeld eingegebenen Monat und das Jahr im Format YYYY-MM darstellt: ein Jahr mit vier oder mehr Ziffern, ein Bindestrich (-) und ein zweistelliger Monat. Das Format der Monatszeichenfolge für diesen Eingabetyp wird unter Monatszeichenfolgen beschrieben.

Einen Standardwert festlegen

Sie können einen Standardwert für das Eingabefeld festlegen, indem Sie im Attribut value einen Monat und ein Jahr angeben:

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" value="2001-06" />

Beachten Sie, dass sich das angezeigte Datumsformat vom tatsächlichen value unterscheidet: Die meisten User-Agents zeigen Monat und Jahr entsprechend der eingestellten Sprache und Region des Betriebssystems an. Der Datumswert in value hat dagegen immer das Format yyyy-MM.

Wenn der obige Wert an den Server gesendet wird, sieht er beispielsweise so aus: bday-month=1978-06.

Den Wert mit JavaScript festlegen

Sie können den Datumswert auch mit JavaScript über die Eigenschaft HTMLInputElement.value auslesen und festlegen:

<label for="bday-month">What month were you born in?</label>
<input id="bday-month" type="month" name="bday-month" />

const monthControl = document.querySelector('input[type="month"]');
monthControl.value = "2001-06";

Zusätzliche Attribute

Neben den Attributen, die allen <input>-Elementen gemeinsam sind, stehen für month-Eingabefelder die folgenden Attribute zur Verfügung.

list

Der Wert des Attributs list ist die id eines <datalist>-Elements im selben Dokument. Das <datalist>-Element stellt eine Liste vordefinierter Werte bereit, die Benutzern für dieses Eingabefeld vorgeschlagen werden. Werte in der Liste, die nicht mit type kompatibel sind, werden nicht als Optionen vorgeschlagen. Die bereitgestellten Werte sind Vorschläge, keine Vorgaben: Benutzer können einen Wert aus der Liste auswählen oder einen anderen Wert eingeben.

max

Der späteste zulässige Monat mit Jahr im Zeichenfolgenformat, das oben im Abschnitt Wert beschrieben wurde. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt die Constraint-Validierung für das Element fehl. Wenn der Wert des Attributs max keine gültige Zeichenfolge im Format yyyy-MM ist, hat das Element keinen Höchstwert.

Dieser Wert muss eine Kombination aus Jahr und Monat angeben, die nach oder gleich der durch das Attribut min festgelegten Kombination liegt.

min

Der früheste zulässige Monat mit Jahr im oben beschriebenen Format yyyy-MM. Wenn der value des Elements darunter liegt, schlägt die Constraint-Validierung für das Element fehl. Wenn für min keine gültige Zeichenfolge aus Jahr und Monat angegeben wird, hat das Eingabefeld keinen Mindestwert.

Dieser Wert muss eine Kombination aus Jahr und Monat sein, die vor oder gleich der durch das Attribut max festgelegten Kombination liegt.

readonly

Ein boolesches Attribut, das festlegt, dass Benutzer dieses Feld nicht bearbeiten können. Sein value kann jedoch weiterhin durch JavaScript-Code geändert werden, der die Eigenschaft HTMLInputElement.value direkt setzt.

step

Das Attribut step ist eine Zahl, die die Schrittweite angibt, an die sich der Wert halten muss, oder der unten beschriebene spezielle Wert any. Gültig sind nur Werte, die um eine ganzzahlige Anzahl von Schritten von der Schrittbasis entfernt sind. Die Schrittbasis ist min, falls angegeben, andernfalls value oder 0 (die Unix-Epoche, 1970-01), wenn keines von beiden angegeben ist.

Bei month-Eingabefeldern wird der Wert von step in Monaten angegeben. Der Standardwert von step ist 1, also ein Monat.

Der Zeichenfolgenwert any bedeutet, dass keine Schrittweite vorgegeben ist und jeder Wert zulässig ist, sofern keine anderen Einschränkungen wie min und max gelten. Tatsächlich hat er bei month-Eingabefeldern dieselbe Wirkung wie 1, da die Auswahloberfläche nur ganze Monate zulässt.

month-Eingabefelder verwenden

Datumsbezogene Eingabefelder (einschließlich month) erscheinen auf den ersten Blick praktisch: Sie versprechen eine einfache Benutzeroberfläche zur Datumsauswahl und vereinheitlichen das Format der an den Server gesendeten Daten unabhängig von den Spracheinstellungen der Benutzer. Bei <input type="month"> gibt es jedoch Probleme, da es derzeit von vielen wichtigen Browsern noch nicht unterstützt wird.

Wir betrachten zunächst einfache und komplexere Einsatzmöglichkeiten von <input type="month"> und geben anschließend im Abschnitt Umgang mit der Browser-Unterstützung Hinweise dazu, wie sich die eingeschränkte Browser-Unterstützung abfedern lässt.

Grundlegende Verwendung von month

Die einfachste Verwendung von <input type="month"> besteht aus einer Kombination von <input>- und <label>-Elementen, wie unten gezeigt:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input id="bday-month" type="month" name="bday-month" />
</form>

Höchst- und Mindestdatum festlegen

Mit den Attributen min und max können Sie den Datumsbereich einschränken, aus dem Benutzer wählen können. Im folgenden Beispiel legen wir 1900-01 als frühesten und 2013-12 als spätesten Monat fest:

<form>
  <label for="bday-month">What month were you born in?</label>
  <input
    id="bday-month"
    type="month"
    name="bday-month"
    min="1900-01"
    max="2013-12" />
</form>

Das hat folgende Auswirkungen:

• Es können nur Monate zwischen Januar 1900 und Dezember 2013 ausgewählt werden; Monate außerhalb dieses Bereichs lassen sich im Steuerelement nicht durch Scrollen erreichen.
• Je nach Browser sind Monate außerhalb des festgelegten Bereichs in der Monatsauswahl möglicherweise nicht auswählbar (z. B. in Edge) oder zwar ungültig (siehe Validierung), aber weiterhin verfügbar (z. B. in Chrome).

Die Größe des Eingabefelds steuern

<input type="month"> unterstützt keine Attribute zur Größenfestlegung für Formularelemente wie size. Um die Größe festzulegen, müssen Sie CSS verwenden.

Validierung

Standardmäßig validiert <input type="month"> eingegebene Werte nicht. Die Benutzeroberflächen lassen in der Regel keine Eingaben zu, die kein Datum sind – was hilfreich ist. Dennoch kann ein Formular mit leerem month-Eingabefeld abgesendet oder ein ungültiges Datum (z. B. der 32. April) eingegeben werden.

Um dies zu vermeiden, können Sie mit min und max die verfügbaren Datumsangaben einschränken (siehe Höchst- und Mindestdatum festlegen). Zusätzlich können Sie mit dem Attribut required eine Datumseingabe verpflichtend machen. Browser, die dies unterstützen, zeigen dann einen Fehler an, wenn versucht wird, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld abzusenden.

Sehen wir uns ein Beispiel an: Hier haben wir Mindest- und Höchstwerte festgelegt und das Feld außerdem als erforderlich markiert:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Wenn Sie versuchen, das Formular abzusenden, ohne Monat und Jahr anzugeben (oder mit einem Datum außerhalb der festgelegten Grenzen), zeigt der Browser einen Fehler an. Probieren Sie das Beispiel aus:

Hier ist das CSS aus dem obigen Beispiel. Wir verwenden die CSS-Pseudoklassen :valid und :invalid, um das Eingabefeld abhängig davon zu gestalten, ob der aktuelle Wert gültig ist. Die Symbole mussten wir auf einem <span>-Element neben dem Eingabefeld platzieren, statt auf dem Eingabefeld selbst: In Chrome wird generierter Inhalt innerhalb des Formularsteuerelements platziert und kann dort nicht sinnvoll gestaltet oder angezeigt werden.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Umgang mit der Browser-Unterstützung

Die Benutzeroberfläche des Steuerelements unterscheidet sich generell von Browser zu Browser. Derzeit ist die Unterstützung lückenhaft: Nur Chromium-Browser auf Desktopgeräten und mobile Browser bieten brauchbare Implementierungen. Das Steuerelement wird meist als kalenderähnliches Raster oder als zwei Auswahlräder dargestellt.

In Browsern, die month-Eingabefelder nicht unterstützen, wird stattdessen <input type="text"> verwendet. Dabei kann der eingegebene Text möglicherweise automatisch daraufhin validiert werden, ob er das erwartete Format hat. Dennoch entstehen Probleme sowohl für die Einheitlichkeit der Benutzeroberfläche (da ein anderes Steuerelement angezeigt wird) als auch für die Verarbeitung der Daten.

Das zweite Problem ist das schwerwiegendere. Wie bereits erwähnt, wird der tatsächliche Wert eines month-Eingabefelds immer auf das Format yyyy-mm normalisiert. Ein text-Eingabefeld weiß in seiner Standardkonfiguration dagegen nicht, welches Datumsformat erwartet wird. Das ist problematisch, weil Datumsangaben auf viele verschiedene Arten geschrieben werden. Beispiele:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Month yyyy (July 2022)
• und so weiter …

Eine Möglichkeit, dies zu umgehen, besteht darin, dem month-Eingabefeld ein Attribut pattern hinzuzufügen. Das month-Eingabefeld selbst verwendet es zwar nicht. Wenn der Browser jedoch auf ein text-Eingabefeld zurückgreift, wird das Muster verwendet. Öffnen Sie beispielsweise die folgende Demo in einem Browser, der month-Eingabefelder nicht unterstützt:

<form>
  <div>
    <label for="month">
      What month would you like to visit (June to Sept.)?
    </label>
    <input
      id="month"
      type="month"
      name="month"
      min="2022-06"
      max="2022-09"
      required
      pattern="[0-9]{4}-[0-9]{2}" />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" value="Submit form" />
  </div>
</form>

Wenn Sie versuchen, das Formular abzusenden, sehen Sie, dass der Browser nun eine Fehlermeldung anzeigt (und das Eingabefeld als ungültig kennzeichnet), falls Ihre Eingabe nicht dem Muster nnnn-nn entspricht, wobei n eine Ziffer von 0 bis 9 ist. Natürlich hindert das niemanden daran, ungültige Datumsangaben (wie 0000-42) oder Datumsangaben einzugeben, die zwar dem Muster entsprechen, aber falsch formatiert sind.

Hinzu kommt, dass Benutzer nicht unbedingt wissen, welches der vielen Datumsformate erwartet wird. Hier ist also noch weitere Arbeit nötig.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

Die beste browserübergreifende Lösung für Datumsangaben in Formularen besteht darin, Monat und Jahr in getrennten Steuerelementen eingeben zu lassen (häufig werden dafür <select>-Elemente verwendet; eine Implementierung finden Sie unten) oder JavaScript-Bibliotheken wie das Plugin jQuery date picker zu verwenden – zumindest so lange, bis alle wichtigen Browser diese Eingabefelder seit einiger Zeit unterstützen.

Beispiele

In diesem Beispiel erstellen wir zwei Gruppen von Benutzeroberflächenelementen, mit denen Benutzer jeweils einen Monat und ein Jahr auswählen können. Die erste verwendet ein natives month-Eingabefeld. Die zweite besteht aus zwei <select>-Elementen, mit denen Monat und Jahr unabhängig voneinander ausgewählt werden können. Sie dient der Kompatibilität mit Browsern, die <input type="month"> noch nicht unterstützen.

HTML

Das Formular zur Abfrage von Monat und Jahr sieht so aus:

<form>
  <div class="nativeDatePicker">
    <label for="month-visit">What month would you like to visit us?</label>
    <input type="month" id="month-visit" name="month-visit" />
    <span class="validity"></span>
  </div>
  <p class="fallbackLabel">What month would you like to visit us?</p>
  <div class="fallbackDatePicker">
    <div>
      <span>
        <label for="month">Month:</label>
        <select id="month" name="month">
          <option selected>January</option>
          <option>February</option>
          <option>March</option>
          <option>April</option>
          <option>May</option>
          <option>June</option>
          <option>July</option>
          <option>August</option>
          <option>September</option>
          <option>October</option>
          <option>November</option>
          <option>December</option>
        </select>
      </span>
      <span>
        <label for="year">Year:</label>
        <select id="year" name="year"></select>
      </span>
    </div>
  </div>
</form>

Das <div>-Element mit der ID nativeDatePicker verwendet den Eingabetyp month, um Monat und Jahr abzufragen. Das <div>-Element mit der ID fallbackDatePicker verwendet stattdessen zwei <select>-Elemente. Mit dem ersten wird der Monat, mit dem zweiten das Jahr ausgewählt.

Das <select>-Element zur Monatsauswahl enthält fest eingetragene Monatsnamen, da sich diese nicht ändern (die Lokalisierung bleibt dabei unberücksichtigt). Die Liste der verfügbaren Jahreszahlen wird abhängig vom aktuellen Jahr dynamisch erzeugt. In den Codekommentaren unten wird genauer erklärt, wie diese Funktionen arbeiten.

div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span::after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span::after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}

JavaScript

Es folgt der JavaScript-Code, der auswählt, welcher Ansatz verwendet wird, und die Liste der Jahre für das nicht native <select>-Element erstellt.

Besonders interessant ist möglicherweise der Code zur Erkennung der Browser-Unterstützung. Um festzustellen, ob der Browser <input type="month"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, dessen type auf month zu setzen, und prüfen unmittelbar danach, welchen Typ es hat. Browser, die den Typ month nicht unterstützen, geben text zurück, da dies der Ersatztyp für nicht unterstützte month-Eingabefelder ist. Wenn <input type="month"> nicht unterstützt wird, blenden wir die native Auswahl aus und zeigen stattdessen die alternative Benutzeroberfläche an.

// Get UI elements
const nativePicker = document.querySelector(".nativeDatePicker");
const fallbackPicker = document.querySelector(".fallbackDatePicker");
const fallbackLabel = document.querySelector(".fallbackLabel");

const yearSelect = document.querySelector("#year");
const monthSelect = document.querySelector("#month");

// Hide fallback initially
fallbackPicker.style.display = "none";
fallbackLabel.style.display = "none";

// Test whether a new date input falls back to a text input or not
const test = document.createElement("input");

try {
  test.type = "month";
} catch (e) {
  console.log(e.description);
}

// If it does, run the code inside the if () {} block
if (test.type === "text") {
  // Hide the native picker and show the fallback
  nativePicker.style.display = "none";
  fallbackPicker.style.display = "block";
  fallbackLabel.style.display = "block";

  // Populate the years dynamically
  // (the months are always the same, therefore hardcoded)
  populateYears();
}

function populateYears() {
  // Get the current year as a number
  const date = new Date();
  const year = date.getFullYear();

  // Make this year, and the 100 years before it available in the year <select>
  for (let i = 0; i <= 100; i++) {
    const option = document.createElement("option");
    option.textContent = year - i;
    yearSelect.appendChild(option);
  }
}

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Das allgemeine <input>-Element und die Schnittstelle zu dessen Bearbeitung, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Tutorial zur Datums- und Zeitauswahl
• <input type="datetime-local">, <input type="date">, <input type="time"> und <input type="week">