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

Das UI des Steuerelements variiert in der Regel 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 – eine brauchbare Implementierung bieten. In Browsern, die month-Eingaben nicht unterstützen, degradiert das Steuerelement problemlos zu <input type="text">, obwohl es möglicherweise eine automatische Validierung des eingegebenen Textes gibt, um sicherzustellen, dass er so formatiert ist, wie erwartet.

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

Die Microsoft Edge month-Steuerung sieht so aus:

Eine Zeichenkette, die den Wert des in die Eingabe eingegebenen Monats und Jahres darstellt, in der Form YYYY-MM (vierstellige oder mehrjährige Zahl, gefolgt von einem Bindestrich (-), gefolgt von dem zweistelligen Monat). Das Format der Monatszeichenfolge, die durch diesen Eingabetyp verwendet wird, wird in Month strings 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" />

Ein Punkt, den Sie beachten sollten, ist, dass sich das angezeigte Datumsformat von dem tatsächlichen value unterscheidet; die meisten Benutzeragenten zeigen den Monat und das Jahr in einer lokalisierten Form an, basierend auf der eingestellten Lokal des Betriebssystems des Benutzers, während das Datum value immer im Format yyyy-MM formatiert ist.

Wenn der obige Wert beispielsweise an den Server gesendet 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 für <input>-Elemente gelten, bieten Monatseingaben die folgenden Attribute.

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

Das späteste akzeptierte Jahr und Monat im oben im Abschnitt Wert beschriebenen Zeichenkettenformat. Wenn das in das Element eingegebene value dies überschreitet, schlägt die Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs keine gültige Zeichenkette im yyyy-MM-Format ist, hat das Element keinen Maximalwert.

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

Das früheste akzeptierte Jahr und Monat, im selben yyyy-MM-Format wie oben beschrieben. Wenn der value des Elements geringer ist als dieser, schlägt die Einschränkungsvalidierung fehl. Wenn ein Wert für min angegeben wird, der keine gültige Jahr- und Monatszeichenkette ist, hat die Eingabe keinen Minimalwert.

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

Ein boolesches Attribut, das, wenn es vorhanden ist, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin aus 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 dem Basiswert (min falls angegeben, sonst value und ein geeigneter Standardwert, wenn keiner dieser Werte angegeben wird) entsprechen, sind gültig.

Ein Zeichenkettenwert von any bedeutet, dass keine Abstufung impliziert ist und jeder Wert erlaubt ist (abgesehen von anderen Einschränkungen wie min und max).

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

Datumbezogene Eingaben (einschließlich month) erscheinen auf den ersten Blick bequem; sie versprechen eine einfache Benutzeroberfläche zur Auswahl von Daten und standardisieren das an den Server gesendete Datenformat, unabhängig von der Benutzerlokalität. Es gibt jedoch Probleme mit <input type="month">, da viele große Browser diesen Eingabetyp derzeit noch nicht unterstützen.

Wir werden uns die grundlegende und komplexere Nutzung von <input type="month"> ansehen und dann im Abschnitt Umgang mit der Browserunterstützung Ratschläge zur Bewältigung des Browserunterstützungsproblems geben.

Die grundlegendste Nutzung von <input type="month"> umfasst eine grundlegende Kombination aus <input> und <label>, 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 Daten zu beschrä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:

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

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

Standardmäßig nimmt <input type="month"> keine Validierung der eingegebenen Werte vor. Die UI-Implementierungen erlauben in der Regel nicht, dass Sie etwas eingeben, das kein Datum ist – was hilfreich ist – aber Sie können dennoch das Formular mit der month-Eingabe leer einreichen 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 Maximal- und Mindestdaten festlegen), und zusätzlich das required-Attribut verwenden, um das Ausfüllen des Datums als verpflichtend zu kennzeichnen. Folglich wird unterstützende Browser einen Fehler anzeigen, wenn Sie versuchen, ein Datum außerhalb der festgelegten Grenzen oder ein leeres Datumsfeld einzureichen.

Sehen wir uns ein Beispiel an; hier haben wir Mindest- und Höchstdaten festgelegt und auch das Feld als erforderlich gekennzeichnet:

<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 Monat als auch 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 von Ihnen, die keinen unterstützenden Browser verwenden:

Hier ist das CSS, das im obigen Beispiel verwendet wird. Hier nutzen wir die :valid- und :invalid-CSS-Eigenschaften, um die Eingabe basierend darauf zu stylen, ob der aktuelle Wert gültig ist. Wir mussten die Symbole auf einem <span> neben dem Eingang setzen, nicht auf dem Eingang selbst, da im Chrome das erzeugte Inhalt innerhalb der Formularsteuerung platziert wird und nicht effektiv gestylt 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 Datumsangaben zum Zeitpunkt des Schreibens darin, dass viele große Browser sie noch nicht alle implementieren; nur Chrome/Opera und Edge unterstützen sie auf dem Desktop, und die meisten modernen Browser auf Mobilgeräten. Als Beispiel sieht der month-Picker auf Chrome für Android so aus:

Nicht unterstützende Browser degradieren problemlos zu einem Texteingabefeld, aber dies schafft Probleme sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (die präsentierte Steuerung wird unterschiedlich sein) als auch bei der Datenverarbeitung.

Das zweite Problem ist das ernstere von beiden. Wie bereits erwähnt, ist der tatsächliche Wert bei einer month-Eingabe immer auf das Format yyyy-mm normalisiert. Andererseits hat ein text-Eingabefeld in seiner Standardkonfiguration keine Ahnung, in welchem Format das Datum vorliegen sollte, und das ist ein Problem aufgrund der Vielzahl unterschiedlicher Möglichkeiten, in denen 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…

Eine Möglichkeit, dies zu umgehen, besteht darin, dem month-Eingabefeld ein pattern-Attribut hinzuzufügen. Obwohl die month-Eingabe dies nicht verwendet, wird das Muster verwendet, wenn der Browser darauf zurückfällt, es als text-Eingabe zu behandeln. Probieren Sie zum Beispiel die folgende Demo in einem Browser aus, 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 abzuschicken, werden Sie feststellen, dass der Browser jetzt eine Fehlermeldung anzeigt (und das Eingabefeld als ungültig hervorhebt), 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 (wie 0000-42) oder falsch formatierte Daten, die dem Muster entsprechen, einzugeben.

Es besteht 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 im Browser-übergreifenden Sinne umzugehen (bis alle großen Browser sie eine Weile lang unterstützt haben), besteht darin, den Benutzer den Monat und das Jahr in separaten Steuerungen eingeben zu lassen (<select>-Elemente sind beliebt; siehe unten für eine Implementierung) oder JavaScript-Bibliotheken wie das jQuery-Datumswähler-Plugin zu verwenden.

In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen, die jeweils darauf ausgelegt sind, es 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 <select>-Elemente, die das unabhängige Auswählen eines Monats und Jahres ermöglichen, für Kompatibilität mit Browsern, die <input type="month"> noch nicht unterstützen.

Das Formular, das nach dem Monat und dem Jahr fragt, 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>

Der <div> mit der ID nativeDatePicker verwendet den Eingabetyp month, um nach Monat und Jahr zu fragen, während der <div> mit der ID fallbackDatePicker stattdessen ein Paar <select>-Elemente verwendet. Das erste fragt nach dem Monat, und das zweite nach dem Jahr.

Das <select>-Element für die Auswahl des Monats ist mit den Namen der Monate hartcodiert, da sie sich nicht ändern (wenn man die Lokalisierung unberücksichtigt lässt). Die Liste der verfügbaren Jahreswerte wird dynamisch je nach aktuellem Jahr generiert (siehe die Kommentare im Code unten für eine detaillierte Erklärung, 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 die Auswahl der Methode zur Verwendung regelt und die Liste der Jahre für das nicht-natives Jahr <select>-Element festlegt.

Der Teil des Beispiels, der von größtem Interesse sein kann, ist der Funktionsnachweisteil. Um festzustellen, ob der Browser <input type="month"> unterstützt, erstellen wir ein neues <input>-Element, versuchen, seinen type-Wert auf month zu setzen, und überprüfen dann, welchen Typ es tatsächlich hat. Browser, die den Typ month nicht unterstützen, geben text zurück, da dies der Fallback für nicht unterstützte Monatseingaben ist. Wenn <input type="month"> nicht unterstützt wird, blenden wir den nativen Picker aus und zeigen stattdessen die Ausweich-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, um es zu manipulieren, HTMLInputElement
• Datum- und Zeitformate in HTML
• Datum- und Uhrzeit-Picker-Tutorial
• <input type="datetime-local">, <input type="date">, <input type="time">, und <input type="week">