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 für diesen Eingabetyp verwendete Format ist unter Zeichenfolgen für Monate beschrieben.

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

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, bieten Eingabefelder des Typs month die folgenden Attribute.

list

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

max

Der späteste zulässige Monat mit Jahr im Zeichenfolgenformat, das oben im Abschnitt Wert beschrieben ist. Wenn der in das Element eingegebene value darüber liegt, schlägt die Validierung anhand von Einschränkungen 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 einen Monat mit Jahr angeben, der nach oder auf dem durch das Attribut min angegebenen Monat 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 Validierung anhand von Einschränkungen fehl. Wenn für min keine gültige Zeichenfolge für Jahr und Monat angegeben ist, hat das Eingabefeld keinen Mindestwert.

Dieser Wert muss einen Monat mit Jahr angeben, der vor oder auf dem durch das Attribut max angegebenen Monat liegt.

readonly

Ein boolesches Attribut, das bei Vorhandensein angibt, dass Benutzer dieses Feld nicht bearbeiten können. Der 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 festlegt, der der Wert entsprechen muss, oder der unten beschriebene spezielle Wert any. Gültig sind nur Werte, die eine ganze Anzahl von Schritten vom Ausgangswert entfernt sind. Der Ausgangswert ist min, falls angegeben, andernfalls value oder 0 (die Unix-Epoche, 1970-01), wenn keines der beiden Attribute angegeben ist.

Bei Eingabefeldern des Typs month wird 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. Bei Eingabefeldern des Typs month hat er praktisch dieselbe Wirkung wie 1, da die Auswahloberfläche nur ganze Monate zulässt.

Eingabefelder des Typs month verwenden

Datumsbezogene Eingabefelder (einschließlich month) wirken zunächst praktisch: Sie versprechen eine einfache Benutzeroberfläche zur Datumsauswahl und vereinheitlichen das an den Server gesendete Datenformat unabhängig von der Spracheinstellung der Benutzer. Allerdings gibt es bei <input type="month"> Probleme, da viele verbreitete Browser diesen Eingabetyp derzeit noch nicht unterstützen.

Wir betrachten zunächst einfache und komplexere Anwendungen von <input type="month"> und geben anschließend im Abschnitt Browserunterstützung berücksichtigen Hinweise zum Umgang mit der eingeschränkten Browserunterstützung.

Grundlegende Verwendung von month

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

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

Frühestes und spätestes Datum 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:

<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" />

Das Ergebnis ist:

• 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 angegebenen 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).

Größe des Eingabefelds steuern

<input type="month"> unterstützt keine Attribute zur Größenfestlegung von Formularfeldern wie size. Verwenden Sie stattdessen CSS, um die Größe festzulegen.

Validierung

Standardmäßig validiert <input type="month"> eingegebene Werte nicht. Die Benutzeroberflächen verhindern in der Regel die Eingabe von Werten, die kein Datum sind. Das ist hilfreich, aber Sie können das Formular dennoch mit einem leeren month-Eingabefeld absenden oder ein ungültiges Datum eingeben (z. B. den 32. April).

Um dies zu vermeiden, können Sie mit min und max die verfügbaren Daten einschränken (siehe Frühestes und spätestes Datum festlegen). Zusätzlich können Sie mit dem Attribut required die Eingabe eines Datums verpflichtend machen. Browser, die diese Funktionen unterstützen, zeigen dann einen Fehler an, wenn Sie versuchen, ein Datum außerhalb des festgelegten Bereichs oder ein leeres Datumsfeld abzusenden.

Sehen wir uns ein Beispiel an: Hier haben wir ein frühestes und ein spätestes Datum festgelegt und das Feld 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wenn Sie versuchen, das Formular ohne Angabe von Monat und Jahr oder mit einem Datum außerhalb des festgelegten Bereichs abzusenden, zeigt der Browser einen Fehler an. Probieren Sie das Beispiel aus:

Hier ist das im obigen Beispiel verwendete CSS. Mit den CSS-Pseudoklassen :valid und :invalid gestalten wir das Eingabefeld abhängig davon, ob sein aktueller Wert gültig ist. Die Symbole mussten wir in einem <span> neben dem Eingabefeld platzieren statt im Eingabefeld selbst: In Chrome wird generierter Inhalt innerhalb des Formularsteuerelements platziert und kann dort nicht wirksam 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;
}

Browserunterstützung berücksichtigen

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

In Browsern, die Eingabefelder des Typs month nicht unterstützen, wird stattdessen <input type="text"> verwendet. Der eingegebene Text wird dabei möglicherweise automatisch darauf geprüft, ob er das erwartete Format hat. Das verursacht jedoch Probleme sowohl bei der Einheitlichkeit der Benutzeroberfläche (das angezeigte Steuerelement ist anders) als auch bei der 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 vereinheitlicht. Ein text-Eingabefeld weiß in seiner Standardkonfiguration hingegen nicht, welches Datumsformat erwartet wird. Das ist problematisch, weil Menschen Datumsangaben auf viele unterschiedliche Arten schreiben. Zum Beispiel:

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

Eine Möglichkeit, dieses Problem zu umgehen, ist ein pattern-Attribut für Ihr month-Eingabefeld. Das month-Eingabefeld selbst verwendet es zwar nicht; wenn der Browser jedoch auf ein text-Eingabefeld zurückfällt, wird das Muster verwendet. Sehen Sie sich beispielsweise die folgende Demo in einem Browser an, der Eingabefelder des Typs month 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>

document.querySelector("form").addEventListener("submit", (event) => {
  event.preventDefault();
});

Wenn Sie versuchen, das Formular abzusenden, zeigt der Browser nun eine Fehlermeldung an und markiert das Eingabefeld als ungültig, falls Ihre Eingabe nicht dem Muster nnnn-nn entspricht. Dabei steht n für eine Ziffer von 0 bis 9. Das hindert Benutzer allerdings nicht daran, ungültige Datumsangaben (wie 0000-42) oder Angaben mit falschem Format einzugeben, die dem Muster entsprechen.

Hinzu kommt, dass Benutzer nicht unbedingt wissen, welches der vielen Datumsformate erwartet wird. Es bleibt also noch etwas zu tun.

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 Umsetzung finden Sie unten) oder JavaScript-Bibliotheken wie das jQuery-Datepicker-Plugin zu verwenden. Das gilt zumindest, bis alle wichtigen Browser Datumsfelder schon seit einiger Zeit unterstützen.

Beispiele

In diesem Beispiel erstellen wir zwei Gruppen von Oberflächenelementen, mit denen Benutzer jeweils einen Monat und ein Jahr auswählen können. Die erste besteht aus einem nativen month-Eingabefeld, die zweite aus zwei <select>-Elementen, mit denen Monat und Jahr unabhängig voneinander ausgewählt werden können. So bleibt die Funktion auch mit Browsern kompatibel, die <input type="month"> noch nicht unterstützen.

HTML

Das HTML für die Abfrage von Monat und Jahr sieht so aus:

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

Das <div> mit der ID nativeDatePicker verwendet den Eingabetyp month, um Monat und Jahr abzufragen. Das <div> mit der ID fallbackDatePicker verwendet stattdessen zwei <select>-Elemente. Das erste fragt den Monat ab, das zweite das Jahr.

Die Monatsnamen im <select> zur Auswahl des Monats sind fest im Code hinterlegt, da sie sich nicht ändern (die Lokalisierung bleibt hier unberücksichtigt). Die Liste der verfügbaren Jahreszahlen wird abhängig vom aktuellen Jahr dynamisch erzeugt. Wie diese Funktionen arbeiten, erläutern die Kommentare im folgenden Code ausführlich.

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

Der folgende JavaScript-Code entscheidet, welcher Ansatz verwendet wird, und erstellt die Liste der Jahre für das nicht native <select> zur Jahresauswahl.

Besonders interessant ist möglicherweise der Code zur Erkennung der Browserunterstützung. Um festzustellen, ob der Browser <input type="month"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, seinen type auf month zu setzen, und prüfen unmittelbar danach den Wert von type. Browser, die den Typ month nicht unterstützen, geben text zurück, da dies der Ausweichwert für einen nicht unterstützten Typ month ist. Wird <input type="month"> nicht unterstützt, 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 seiner Bearbeitung, HTMLInputElement
• In HTML verwendete Datums- und Zeitformate
• Tutorial zu Auswahlfeldern für Datum und Uhrzeit
• <input type="datetime-local">, <input type="date">, <input type="time"> und <input type="week">