<input type="month">

Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser; derzeit ist die Unterstützung ungleichmäßig, mit nur Chrome/Opera und Edge auf dem Desktop – und den meisten modernen mobilen Browserversionen – die brauchbare Implementierungen haben. In Browsern, die month-Eingaben nicht unterstützen, wird das Steuerelement zu <input type="text"> herabgestuft, obwohl möglicherweise eine automatische Überprüfung erfolgt, um sicherzustellen, dass der eingegebene Text im erwarteten Format vorliegt.

Für diejenigen unter Ihnen, die einen Browser verwenden, der month nicht unterstützt, zeigt der folgende Screenshot, wie es in Chrome und Opera aussieht. Ein Klick auf den Pfeil nach unten auf der rechten Seite öffnet einen Datumsauswahler, mit dem Sie Monat und Jahr auswählen können.

Das Microsoft Edge month-Steuerelement sieht so aus:

Ein String, der den Wert des in das Eingabefeld eingegebenen Monats und Jahres im Format JJJJ-MM (vier- oder mehrstelliges Jahr, dann ein Bindestrich (-), gefolgt vom zweistelligen Monat) darstellt. Das Format des vom Eingabetyp verwendeten Monats-Strings wird in Monats-Strings beschrieben.

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

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

Ein wichtiger Hinweis ist, dass sich das angezeigte Datumsformat vom tatsächlichen value unterscheidet; die meisten Benutzeragenten zeigen den Monat und das Jahr in einer für das Gebietsschema des Benutzers geeigneten Form an, basierend auf dem festgelegten Gebietsschema des Betriebssystems des Benutzers, während der Datumswert stets im Format yyyy-MM formatiert ist.

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

Sie können den Datumswert auch mit JavaScript über die HTMLInputElement.value-Eigenschaft abrufen und festlegen, 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 für <input>-Elemente bieten Monateingaben die folgenden Attribute.

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

Das späteste Jahr und der späteste Monat im oben besprochenen String-Format, die akzeptiert werden. Wenn der in das Element eingegebene value diesen übersteigt, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs kein gültiger String im Format yyyy-MM ist, hat das Element keinen Maximalwert.

Dieser Wert muss ein Jahr-Monat-Paar angeben, das später oder gleich dem im min-Attribut angegebenen Wert ist.

Das früheste Jahr und der früheste Monat, die akzeptiert werden, im selben oben beschriebenen Format yyyy-MM. Wenn der value des Elements geringer ist als dieser, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, der kein gültiger Jahr- und Monats-String ist, hat die Eingabe keinen Mindestwert.

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

Ein Boolean-Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld nicht vom Benutzer bearbeitet werden kann. Sein value kann jedoch immer noch durch 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, die der Wert erfüllen muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die dem Basiswert der Schritte entsprechen (min, falls angegeben, ansonsten value und ein geeigneter Standardwert, falls keiner der beiden bereitgestellt wird), sind gültig.

Ein String-Wert von any bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max).

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

Datumbezogene Eingaben (einschließlich month) klingen auf den ersten Blick praktisch; sie versprechen eine einfache Benutzeroberfläche zum Auswählen von Datumsangaben und sie normalisieren das Format der gesendeten Daten an den Server, unabhängig vom Gebietsschema des Benutzers. Allerdings gibt es Probleme mit <input type="month">, da derzeit viele große Browser es noch nicht unterstützen.

Wir werden uns die grundlegenden und komplexeren Verwendungen von <input type="month"> ansehen und dann Ratschläge zur Bewältigung des Browser-Kompatibilitätsproblems im Abschnitt Umgang mit Browser-Kompatibilität geben.

Die grundlegendste Verwendung von <input type="month"> beinhaltet eine einfache Kombination aus <input> und <label>, 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 Daten einzuschränken, die der Benutzer auswählen kann. 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 hier ist:

• Es können nur Monate zwischen Januar 1900 und Dezember 2013 ausgewählt werden; Monate außerhalb dieses Bereichs können im Steuerelement nicht gescrollt werden.
• Je nach dem von Ihnen verwendeten Browser stellen Sie möglicherweise fest, dass Monate außerhalb des angegebenen Bereichs im Monatspicker nicht ausgewählt werden können (z.B. Edge) oder ungültig (siehe Validierung) aber immer noch verfügbar (z.B. Chrome) sind.

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

Standardmäßig wendet <input type="month"> keine Validierung auf eingegebene Werte an. Die UI-Implementierungen lassen Sie im Allgemeinen nichts eingeben, das kein Datum ist – was hilfreich ist –, aber Sie können das Formular dennoch mit leerem month-Eingabefeld übermitteln oder ein ungültiges Datum eingeben (z.B. den 32. April).

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

Sehen wir uns ein Beispiel an: Hier haben wir Mindest- und Höchstdaten 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 zu übermitteln, ohne sowohl den Monat als auch das Jahr anzugeben (oder mit einem Datum außerhalb der festgelegten Grenzen), zeigt der Browser einen Fehler an. Probieren Sie jetzt das Beispiel aus:

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

Hier ist das in dem obigen Beispiel verwendete CSS. Hier machen wir von den :valid und :invalid CSS-Eigenschaften Gebrauch, um das Eingabefeld basierend darauf zu stilisieren, ob der aktuelle Wert gültig ist. Wir mussten die Icons auf eine <span> neben der Eingabe setzen, nicht auf das Eingabefeld selbst, da in Chrome die generierten Inhalte innerhalb des Formularsteuerelements platziert werden und nicht effektiv gestylt oder angezeigt werden können.

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, ist das größte Problem bei der Verwendung von Datumseingaben zum Zeitpunkt des Schreibens, dass viele große Browser sie noch nicht alle implementiert haben; nur Chrome/Opera und Edge unterstützen es auf dem Desktop und die meisten modernen Browser auf Mobilgeräten. Ein Beispiel: Der month-Picker auf Chrome für Android sieht so aus:

Browser, die es nicht unterstützen, fallen anmutig auf eine Texteingabe zurück, aber dies schafft sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird anders sein) als auch beim Datenhandling Probleme.

Das zweite Problem ist das ernsthaftere der beiden. Wie zuvor 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 Ahnung, in welchem Format das Datum sein sollte, und das ist ein Problem wegen der Vielzahl unterschiedlicher Arten, wie Menschen Daten schreiben. Zum Beispiel:

• mmyyyy (072022)
• mm/yyyy (07/2022)
• mm-yyyy (07-2022)
• yyyy-mm (2022-07)
• Monat yyyy (Juli 2022)
• und so weiter…

Ein Weg, dies zu umgehen, besteht darin, ein pattern-Attribut auf Ihre month-Eingabe zu setzen. Auch wenn die month-Eingabe es nicht verwendet, wird das Muster verwendet, wenn der Browser dazu übergeht, es als text-Eingabe zu behandeln. Sehen Sie sich das folgende Demo in einem Browser an, der keine month-Eingaben 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, werden Sie feststellen, dass der Browser jetzt eine Fehlermeldung anzeigt (und die Eingabe als ungültig markiert), wenn Ihr Eintrag 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 (z. B. 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, mit Daten in Formularen plattformübergreifend umzugehen (bis alle großen Browser sie eine Weile lang unterstützt haben), besteht darin, den Benutzer zu bitten, Monat und Jahr in separaten Steuerelementen einzugeben (<select>-Elemente sind beliebt; siehe unten für eine Implementierung) oder JavaScript-Bibliotheken wie das jQuery date picker-Plugin zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze von Benutzeroberflächenelementen, die jeweils dazu gedacht sind, dem Benutzer zu ermöglichen, einen Monat und ein Jahr auszuwählen. Der erste ist eine native month-Eingabe, und der 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 den Monat und das 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 den Monat und das Jahr anzufordern, während das <div> mit der ID fallbackDatePicker stattdessen ein Paar <select>-Elemente verwendet. Das erste erfragt den Monat und das zweite das Jahr.

Das <select> zum Auswählen des Monats ist mit den Namen der Monate fest codiert, da sie sich nicht ändern (unter Auslassung der Lokalisierung). Die Liste der verfügbaren Jahreswerte wird je nach aktuellem Jahr dynamisch generiert (siehe die Codekommentare 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 auswählt, welcher Ansatz verwendet werden 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 Funktionserkennung. 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 überprüfen dann sofort, auf welchen Typ es gesetzt ist. Browser, die den Typ month nicht unterstützen, geben text zurück, da dies das ist, was month auf fällt, wenn es nicht unterstützt wird. Wenn <input type="month"> nicht unterstützt wird, blenden wir die native Auswahl aus und zeigen stattdessen die Fallback-Auswahl-UI 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
• Datum- und Zeitformate in HTML
• Datum- und Zeit-Auswahl Tutorial
• <input type="datetime-local">, <input type="date">, <input type="time"> und <input type="week">