<input type="month">

Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser; derzeit ist die Unterstützung lückenhaft, wobei nur Chrome/Opera und Edge auf dem Desktop - und die meisten modernen mobilen Browserversionen - nutzbare Implementierungen bieten. In Browsern, die month-Eingaben nicht unterstützen, wird das Steuerelement zu einem einfachen <input type="text"> herabgestuft, obwohl es möglicherweise eine automatische Validierung des eingegebenen Textes gibt, um sicherzustellen, dass er wie erwartet formatiert ist.

Für diejenigen, die einen Browser verwenden, der month nicht unterstützt, zeigt das folgende Screenshot, wie es in Chrome und Opera aussieht. Ein Klick auf den Abwärtspfeil auf der rechten Seite öffnet einen Datumsauswahl-Dialog, mit dem Sie den Monat und das Jahr auswählen können.

Die Microsoft Edge month-Steuerung sieht so aus:

Eine Zeichenkette, die den Monat und das Jahr darstellt, die in das Eingabefeld eingegeben wurden, im Format YYYY-MM (vier- oder mehrstelliges Jahr, dann ein Bindestrich (-), gefolgt vom zweistelligen Monat). Das Format der Monatszeichenkette, die von diesem Eingabetyp verwendet wird, wird in Monatszeichenfolgen 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 lokal angepassten Form an, basierend auf dem eingestellten Gebietsschema des Betriebssystems des Benutzers, während der Datumswert immer yyyy-MM formatiert ist.

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

Sie können den Datumswert auch in JavaScript mit der 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 allgemeinen Attributen, die zu <input>-Elementen gehören, bieten Monatseingaben die folgenden Attribute.

Der Wert des list-Attributs ist die id eines <datalist>-Elements, das sich im selben Dokument befindet. Das <datalist> liefert eine Liste vordefinierter Werte, die dem Benutzer für diese Eingabe vorgeschlagen werden. Werte in der Liste, die nicht mit dem type kompatibel sind, werden in den vorgeschlagenen Optionen nicht berücksichtigt. Die angegebenen Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.

Das späteste Jahr und der späteste Monat, die in dem oben im Abschnitt Wert beschriebenen Zeichenfolgenformat akzeptiert werden. Wenn der in das Element eingegebene value diesen Wert überschreitet, schlägt das Element die Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine gültige Zeichenfolge im yyyy-MM-Format ist, hat das Element keinen Höchstwert.

Dieser Wert muss ein Jahr-Monat-Paar sein, das später oder gleich dem ist, das durch das min-Attribut angegeben wird.

Das früheste Jahr und der früheste Monat, der im gleichen yyyy-MM-Format wie oben beschrieben akzeptiert wird. Wenn der value des Elements kleiner ist als dieser Wert, schlägt das Element die Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Jahr- und Monatszeichenfolge ist, hat die Eingabe keinen Mindestwert.

Dieser Wert muss ein Jahr-Monat-Paar sein, das früher oder gleich dem ist, das durch das max-Attribut angegeben wird.

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, der der Wert entsprechen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die der Grundlage für das Schrittintervall (min falls angegeben, value andernfalls und ein entsprechender Standardwert, wenn keiner dieser Werte angegeben ist) entsprechen, sind gültig.

Ein Wert von any bedeutet, dass kein Schrittintervall impliziert ist und jeder Wert erlaubt ist (unter Vorbehalt anderer Einschränkungen, wie min und max).

Für month-Eingaben wird der Wert des step-Attributs in Monaten angegeben, mit einem Skalierungsfaktor von 1 (da der zugrundeliegende numerische Wert ebenfalls in Monaten ist). Der Standardwert von step ist 1 Monat.

Datumsbezogene Eingaben (einschließlich month) klingen auf den ersten Blick praktisch; sie versprechen eine einfache Benutzeroberfläche zur Auswahl von Daten und normalisieren das Datenformat, das an den Server gesendet wird, unabhängig vom Gebietsschema des Benutzers. Es gibt jedoch Probleme mit <input type="month">, da zu diesem Zeitpunkt viele große Browser es noch nicht unterstützen.

Wir werden uns die grundlegenden und komplexeren Verwendungen von <input type="month"> ansehen und dann im Abschnitt Umgang mit Browserunterstützung Ratschläge zur Minderung des Browserunterstützungsproblems geben.

Die einfachste Verwendung von <input type="month"> besteht darin, eine Kombination aus einem grundlegenden <input> und einem <label>-Element zu haben, 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>

Sie können die Attribute min und max verwenden, um den Bereich der auswählbaren Daten zu beschränken. Im folgenden Beispiel geben wir einen Mindestmonat von 1900-01 und einen Höchstmonat 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 ist hier, dass:

• Nur Monate zwischen Januar 1900 und Dezember 2013 ausgewählt werden können; Monate außerhalb dieses Bereichs können im Steuerelement nicht gescrollt werden.
• Je nachdem, welchen Browser Sie verwenden, könnte es sein, dass Monate außerhalb des angegebenen Bereichs im Monatspicker nicht auswählbar sind (z. B. Edge) oder ungültig (siehe Validierung), aber dennoch verfügbar (z. B. Chrome).

<input type="month"> unterstützt keine Formulargrößenattribute wie size. Sie müssen auf CSS zurückgreifen, um Größenanforderungen zu erfüllen.

Standardmäßig wird bei <input type="month"> keine Validierung der eingegebenen Werte angewendet. Die Implementierungen der Benutzeroberfläche lassen in der Regel nicht zu, dass Sie etwas eingeben, das kein Datum ist - was hilfreich ist -, aber Sie können das Formular weiterhin mit der month-Eingabe leer übermitteln oder ein ungültiges Datum (z. B. den 32. April) eingeben.

Um dies zu vermeiden, können Sie min und max verwenden, um die verfügbaren Daten einzuschränken (siehe Setting maximum and minimum dates), und zusätzlich das required-Attribut verwenden, um das Ausfüllen des Datums obligatorisch zu machen. Als Ergebnis zeigen unterstützende Browser einen Fehler an, wenn Sie versuchen, ein Datum zu übermitteln, das außerhalb der festgelegten Grenzen liegt, oder ein leeres Datumsfeld.

Lassen Sie uns ein Beispiel ansehen; hier haben wir Mindest- und Höchstdaten festgelegt und das Feld auch erforderlich gemacht:

<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 einzureichen, ohne sowohl den Monat als auch das Jahr anzugeben (oder mit einem Datum außerhalb der festgelegten Grenzen), zeigt der Browser einen Fehler an. Versuchen Sie jetzt, mit dem Beispiel zu spielen:

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

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier nutzen wir die CSS-Eigenschaften :valid und :invalid, um die Eingabe basierend darauf zu gestalten, ob der aktuelle Wert gültig ist. Wir mussten die Symbole auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, da im Chrome der generierte Inhalt innerhalb des Formularsteuerungselements platziert wird und nicht effektiv gestaltet oder angezeigt 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 große Browser sie noch nicht vollständig implementieren; nur Chrome/Opera und Edge unterstützen sie auf dem Desktop und die meisten modernen Browser auf Mobilgeräten sind kompatibel. Ein Beispiel hierfür ist der month-Picker in Chrome für Android, der so aussieht:

Nicht unterstützende Browser degradieren auf ein Texteingabefeld, was sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement ist unterschiedlich) als auch auf die Datenverwaltung Probleme verursacht.

Das zweite Problem ist das bekanntere der beiden. Wie bereits erwähnt, wird bei einer month-Eingabe der tatsächliche Wert immer auf das Format yyyy-mm normalisiert. Andererseits hat eine text-Eingabe in ihrer Standardkonfiguration keine Vorstellung davon, in welchem Format das Datum vorliegen sollte, was ein Problem ist angesichts der Vielzahl von Möglichkeiten, wie Menschen Daten schreiben. Zum Beispiel:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Month yyyy (Juli 2022)
• usw...

Ein Weg, dies zu umgehen, ist das Hinzufügen eines pattern-Attributs zu Ihrer month-Eingabe. Auch wenn die month-Eingabe es nicht nutzt, wird das Muster verwendet, wenn der Browser dazu zurückfällt, es wie eine text-Eingabe zu behandeln. Beispielsweise können Sie versuchen, die folgende Demo in einem Browser anzusehen, 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 verhindert dies nicht, dass Leute ungültige Daten eingeben (wie 0000-42), oder falsch formatierte Daten, die dem Muster folgen.

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 plattformübergreifende Weise umzugehen (bis alle großen Browser sie eine Weile lang unterstützt haben), besteht darin, den Benutzer dazu zu bringen, den Monat und das Jahr in separaten Steuerelementen einzugeben (<select>-Elemente sind beliebt; siehe unten für eine Implementierung) oder JavaScript-Bibliotheken wie das jQuery-Datumsauswahl-Plugin zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen, die jeweils dazu bestimmt sind, den Benutzer einen Monat und ein Jahr auswählen zu lassen. 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 auszuwählen, für die Kompatibilität mit Browsern, die <input type="month"> noch nicht unterstützen.

Das Formular, das Monat und Jahr anfordert, 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> mit der ID nativeDatePicker verwendet den month-Eingabetyp, um Monat und Jahr anzufordern, während das <div> mit der ID fallbackDatePicker stattdessen ein Paar von <select>-Elementen verwendet. Das erste erfragt den Monat, das zweite das Jahr.

Das <select> zur Auswahl des Monats ist mit den Namen der Monate hartcodiert, da diese sich nicht ändern (wenn die Lokalisierung außen vor bleibt). Die Liste der verfügbaren Jahrwerte wird abhängig vom aktuellen Jahr dynamisch generiert (siehe die Kommentare im Code für ausführliche Erklärungen, 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;
}

Der JavaScript-Code, der auswählt, welchen Ansatz man verwenden soll und die Liste der Jahre für das nicht native Jahr <select> einrichtet, folgt.

Der Teil des Beispiels, der möglicherweise von größtem Interesse ist, 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, was sein Typ ist. Browser, die den Typ month nicht unterstützen, geben text zurück, da month darauf zurückfällt, wenn es nicht unterstützt wird. 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, um es zu manipulieren, HTMLInputElement
• Datums- und Zeitformate in HTML
• Anleitung für Datum- und Zeitauswahl-Dialoge
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="week">
• Kompatibilitätstabelle für CSS-Eigenschaften