<input type="month">

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

Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser; im Moment ist die Unterstützung lückenhaft, da nur Chrome/Opera und Edge auf dem Desktop – und die meisten modernen mobilen Browserversionen – brauchbare Implementierungen haben. In Browsern, die month-Eingaben nicht unterstützen, wechselt das Steuerelement elegant zu <input type="text">, obwohl möglicherweise eine automatische Validierung des eingegebenen Textes erfolgt, um sicherzustellen, dass er wie erwartet formatiert ist.

Für diejenigen, die einen Browser verwenden, der month nicht unterstützt, zeigt der untenstehende Screenshot, wie es in Chrome und Opera aussieht. Ein Klick auf den Pfeil nach unten auf der rechten Seite öffnet einen Datumsauswähler, der es Ihnen ermöglicht, Monat und Jahr auszuwählen.

Die Microsoft Edge month-Steuerung sieht so aus:

Ein String, der den Wert des eingegebenen Monats und Jahres im Format YYYY-MM darstellt (mehrstellige Jahreszahl, gefolgt von einem Bindestrich (-), gefolgt von dem zweistelligen Monat). Das Format des von diesem Eingabetyp verwendeten Monatsstrings wird in Monatsstrings beschrieben.

Sie können einen Standardwert für das Eingabesteuerelement festlegen, indem Sie einen Monat und ein Jahr innerhalb des value-Attributs angeben, wie folgt:

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

Es ist zu beachten, dass das angezeigte Datumsformat vom tatsächlichen value abweicht; die meisten Benutzeragenten zeigen den Monat und das Jahr in einer für das Gebietsschema geeigneten Form an, basierend auf dem eingestellten Gebietsschema des Betriebssystems des Benutzers, während das Datumsvalue immer im Format yyyy-MM formatiert ist.

Wenn der obige Wert beispielsweise an den Server übermittelt wird, sieht er aus wie bday-month=1978-06.

Sie können den Datumswert auch in JavaScript über die HTMLInputElement.value-Eigenschaft abrufen und setzen, zum Beispiel:

<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ätzlich zu den für <input>-Elemente üblichen Attributen bieten Monatseingaben die folgenden Attribute.

Der Wert des list-Attributes ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Die <datalist> bietet eine Liste vorher festgelegter Werte, die dem Benutzer als Vorschläge für diese Eingabe gemacht werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den Vorschlagsoptionen nicht aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser voreingestellten Liste auswählen oder einen anderen Wert eingeben.

Das späteste Jahr und Monat, im oben im Wert-Abschnitt besprochenen String-Format, das akzeptiert wird. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element Beschränkungsüberprüfung fehl. Wenn der Wert des max-Attributes kein gültiger String im yyyy-MM-Format ist, hat das Element keinen Höchstwert.

Dieser Wert muss eine Jahr-Monat-Paarung später oder gleich der im min-Attribute angegebenen Paarung spezifizieren.

Das früheste Jahr und Monat, das im oben beschriebenen yyyy-MM-Format akzeptiert wird. Wenn der value des Elements geringer als dieser Wert ist, schlägt das Element die Beschränkungsüberprüfung fehl. Wenn ein nicht gültiger Jahr- und Monatsstring für min angegeben ist, hat die Eingabe keinen Mindestwert.

Dieser Wert muss eine Jahr-Monat-Paarung sein, die früher oder gleich der im max-Attribute angegebenen Paarung ist.

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin von JavaScript-Code geändert werden, der den Wert der HTMLInputElement.value-Eigenschaft direkt setzt.

Das step-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Zahl von Schritten vom Basiswert entfernt sind, sind gültig. Der Basiswert ist min, wenn angegeben, andernfalls value oder 0 (die Unix-Epoche, 1970-01), wenn keiner angegeben ist.

Für month-Eingaben wird der Wert von step in Monaten angegeben. Der Standardwert von step ist 1, was 1 Monat bedeutet.

Ein String-Wert von any bedeutet, dass kein Schritt erforderlich ist und jeder Wert erlaubt ist (außer es bestehen andere Beschränkungen, wie min und max). Tatsächlich hat es die gleiche Wirkung wie 1 für month-Eingaben, weil die Auswahl-UI nur das Auswählen ganzer Monate zulässt.

Datumsbezogene Eingaben (einschließlich month) erscheinen auf den ersten Blick bequem; sie versprechen eine einfache Benutzeroberfläche für die Auswahl von Datumsangaben und normalisieren das an den Server gesendete Datenformat, unabhängig vom Gebietsschema des Benutzers. Es gibt jedoch Probleme mit <input type="month">, da es derzeit viele wichtige Browser gibt, die es noch nicht unterstützen.

Wir werden uns grundlegende und komplexere Verwendungen von <input type="month"> ansehen und dann im Abschnitt Umgang mit Browser-Unterstützung Ratschläge zur Minderung des Browser-Support-Problems geben.

Die grundlegendste Verwendung von <input type="month"> umfasst eine Kombination aus einem einfachen <input> und <label>-Element, wie unten zu sehen:

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

Sie können die Attribute min und max verwenden, um den Bereich der vom Benutzer auswählbaren Daten einzuschränken. Im folgenden Beispiel geben wir ein minimales Datum von 1900-01 und ein maximales Datum von 2013-12 an:

<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 Ergebnis hier ist:

• Es können nur Monate zwischen Januar 1900 und Dezember 2013 ausgewählt werden; Monate außerhalb dieses Bereichs können in der Steuerung nicht gescrollt werden.
• Je nachdem, welchen Browser Sie verwenden, können Sie feststellen, dass Monate außerhalb des angegebenen Bereichs im Monatspicker möglicherweise nicht auswählbar sind (z. B. Edge) oder ungültig (siehe Validierung), aber immer noch verfügbar (z. B. Chrome) sind.

<input type="month"> unterstützt keine Größenattribute wie size. Sie müssen auf CSS für Größenanpassungen zurückgreifen.

Standardmäßig wendet <input type="month"> keine Validierung auf eingegebene Werte an. Die Benutzeroberflächenimplementierungen lassen Sie im Allgemeinen nichts eingeben, was kein Datum ist – was hilfreich ist – aber Sie können das Formular dennoch mit leerer Monatsheingabe oder einem ungültigen Datum (z. B. dem 32. April) einreichen.

Um dies zu vermeiden, können Sie min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Maximal- und Minimaldaten festlegen) und zusätzlich das required-Attribut verwenden, um das Ausfüllen des Datumsfelds erforderlich zu machen. Als Ergebnis werden unterstützende Browser einen Fehler anzeigen, wenn Sie versuchen, ein Datum einzureichen, das außerhalb der gesetzten Grenzen liegt oder ein leeres Datumsfeld ist.

Sehen wir uns ein Beispiel an; hier haben wir minimale und maximale Daten festgelegt und auch 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>

Wenn Sie versuchen, das Formular ohne sowohl spezifischen Monat als auch Jahr einzureichen (oder mit einem Datum außerhalb der gesetzten Grenzen), zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:

Hier ist ein Screenshot für diejenigen von Ihnen, die keinen unterstützenden Browser verwenden:

Hier ist das im obigen Beispiel verwendete CSS. Hier verwenden wir die :valid und :invalid CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir mussten die Icons auf einen <span> neben der Eingabe setzen, nicht auf die Eingabe selbst, weil in Chrome der generierte Inhalt innerhalb des Formularelements platziert wird und nicht effektiv gestylt oder gezeigt werden kann.

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

Wie oben erwähnt, besteht das Hauptproblem bei der Verwendung von Datumseingaben zum Zeitpunkt des Schreibens darin, dass viele bedeutende Browser sie noch nicht alle implementiert haben; nur Chrome/Opera und Edge unterstützen sie auf dem Desktop, und die meisten modernen Browser auf Mobilgeräten. Das month-Feld auf Chrome für Android sieht beispielsweise so aus:

Nicht unterstützende Browser wechseln elegant zu einer Texteingabe, aber dies schafft Probleme sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement ist unterschiedlich) als auch bei der Datenverarbeitung.

Das zweite Problem ist das ernsthaftere der beiden. Wie bereits erwähnt, wird der tatsächliche Wert bei einer month-Eingabe immer auf das Format yyyy-mm normalisiert. Andererseits hat eine text-Eingabe in ihrer Standardkonfiguration keine Ahnung, in welchem Format das Datum sein soll, und das ist ein Problem wegen der Vielzahl an verschiedenen Möglichkeiten, wie Menschen Datum schreiben. Zum Beispiel:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Month yyyy (Juli 2022)
• und so weiter...

Ein Weg, dies zu umgehen, besteht darin, ein pattern-Attribut auf Ihrer month-Eingabe zu setzen. Auch wenn die month-Eingabe es nicht verwendet, wird das Muster verwendet, wenn der Browser es behandelt, als wäre es eine text-Eingabe. Versuchen Sie zum Beispiel, das folgende Beispiel in einem Browser zu betrachten, der month-Eingaben 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, es zu übermitteln, wird der Browser jetzt eine Fehlermeldung anzeigen (und die Eingabe als ungültig markieren), wenn Ihre Eingabe nicht dem Muster nnnn-nn entspricht, wobei n eine Zahl von 0 bis 9 ist. Natürlich hindert dies die Leute nicht daran, ungültige Daten einzugeben (wie 0000-42) oder falsch formatierte Daten, die dem Muster entsprechen.

Es gibt auch das Problem, dass der Benutzer nicht unbedingt weiß, welches der vielen Datumsformate erwartet wird. Wir haben noch Arbeit vor uns.

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

Der beste Weg, um mit Daten in Formularen auf eine browserübergreifende Weise umzugehen (bis alle großen Browser sie eine Weile unterstützt haben), besteht darin, den Benutzer den Monat und das Jahr in separaten Steuerelementen eingeben zu lassen (<select>-Elemente sind beliebt; siehe unten für eine Implementierung) oder JavaScript-Bibliotheken wie das jQuery-Datumsauswahler-Plug-in zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze von Benutzeroberflächenelementen, die jeweils darauf ausgelegt sind, dem Benutzer die Auswahl eines Monats und eines Jahres zu ermöglichen. Das erste ist eine native month-Eingabe, und das andere ist ein Paar von <select>-Elementen, die es ermöglichen, Monat und Jahr unabhängig voneinander auszuwählen, für die Kompatibilität mit Browsern, die <input type="month"> noch nicht unterstützen.

Das Formular, das den Monat und das Jahr anfragt, sieht folgendermaßen 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> mit der ID nativeDatePicker verwendet den month-Eingabetyp, um Monat und Jahr zu erfragen, während das <div> mit der ID fallbackDatePicker stattdessen ein Paar von <select>-Elementen verwendet. Das erste fragt nach dem Monat, und das zweite nach dem Jahr.

Das <select> zur Auswahl des Monats ist mit den Namen der Monate fest kodiert, da diese sich nicht ändern (unter Ignorierung der Lokalisierung). Die Liste der verfügbaren Jahreswerte wird abhängig vom aktuellen Jahr dynamisch generiert (siehe die Kommentare im Code unten für detaillierte Erklärungen, wie diese Funktionen funktionieren).

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

Der JavaScript-Code, der das Auswählen welcher Ansatz verwendet wird und das Einrichten der Liste der Jahre für das nicht-native Jahr-<select> behandelt, folgt.

Der Teil des Beispiels, der vielleicht am meisten Interesse weckt, ist der Code zur Feature-Erkennung. Um zu erkennen, ob der Browser <input type="month"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, seinen type auf month zu setzen und prüfen dann sofort, welcher Typ eingestellt ist. Browser, die den Typ month nicht unterstützen, geben text zurück, da month auf text zurückfällt, wenn nicht unterstützt. Wenn <input type="month"> nicht unterstützt wird, blenden wir den nativen Picker aus und zeigen stattdessen die Fallback-Picker-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);
  }
}

• Das generische <input>-Element und die Schnittstelle zur Manipulation, HTMLInputElement
• Datums- und Zeitformate in HTML
• Datums- und Zeitauswahler-Tutorial
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="week">