<input>-Elemente des Typsmonth erstellen Eingabefelder, die es dem Benutzer ermöglichen, einen Monat und ein Jahr einzugeben, sodass ein Monat und ein Jahr einfach eingegeben werden können. Der Wert ist ein String im FormatYYYY-MM, wobeiYYYY das vierstellige Jahr undMM die Monatsnummer ist.

Probieren Sie es aus

<label for="start">Start month:</label><input type="month" 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, diemonth-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, dermonth 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 Edgemonth-Steuerung sieht so aus:

Wert

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 inMonatsstrings beschrieben.

Einen Standardwert setzen

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

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

Es ist zu beachten, dass das angezeigte Datumsformat vom tatsächlichenvalue abweicht; die meistenBenutzeragenten 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 Formatyyyy-MM formatiert ist.

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

Den Wert mit JavaScript setzen

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

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

const monthControl = document.querySelector('input[type="month"]');monthControl.value = "2001-06";

Zusätzliche Attribute

Zusätzlich zu den für<input>-Elemente üblichen Attributen bieten Monatseingaben die folgenden Attribute.

list

Der Wert deslist-Attributes ist dieid 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 demtype 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.

max

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

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

min

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

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

readonly

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

step

Dasstep-Attribut ist eine Zahl, die die Granularität angibt, an die sich der Wert halten muss, oder der spezielle Wertany, der unten beschrieben wird. Nur Werte, die eine ganze Zahl von Schritten vom Basiswert entfernt sind, sind gültig. Der Basiswert istmin, wenn angegeben, andernfallsvalue oder0 (die Unix-Epoche,1970-01), wenn keiner angegeben ist.

Fürmonth-Eingaben wird der Wert vonstep in Monaten angegeben. Der Standardwert vonstep ist 1, was 1 Monat bedeutet.

Ein String-Wert vonany bedeutet, dass kein Schritt erforderlich ist und jeder Wert erlaubt ist (außer es bestehen andere Beschränkungen, wiemin undmax). Tatsächlich hat es die gleiche Wirkung wie1 fürmonth-Eingaben, weil die Auswahl-UI nur das Auswählen ganzer Monate zulässt.

Verwendung von Monatsangaben

Datumsbezogene Eingaben (einschließlichmonth) 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 AbschnittUmgang mit Browser-Unterstützung Ratschläge zur Minderung des Browser-Support-Problems geben.

Grundlegende Verwendungen des Monats

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 type="month" name="bday-month" /></form>

Maximal- und Minimaldaten festlegen

Sie können die Attributemin undmax verwenden, um den Bereich der vom Benutzer auswählbaren Daten einzuschränken. Im folgenden Beispiel geben wir ein minimales Datum von1900-01 und ein maximales Datum von2013-12 an:

<form>  <label for="bday-month">What month were you born in?</label>  <input       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 (sieheValidierung), aber immer noch verfügbar (z. B. Chrome) sind.

Eingabegröße steuern

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

Validierung

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 Siemin undmax verwenden, um die verfügbaren Daten einzuschränken (sieheMaximal- und Minimaldaten festlegen) und zusätzlich dasrequired-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           type="month"      name="month"      min="2022-06"      max="2022-09"      required />    <span></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;}

Umgang mit Browser-Unterstützung

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. Dasmonth-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 einermonth-Eingabe immer auf das Formatyyyy-mm normalisiert. Andererseits hat einetext-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, einpattern-Attribut auf Ihrermonth-Eingabe zu setzen. Auch wenn diemonth-Eingabe es nicht verwendet, wird das Muster verwendet, wenn der Browser es behandelt, als wäre es einetext-Eingabe. Versuchen Sie zum Beispiel, das folgende Beispiel in einem Browser zu betrachten, dermonth-Eingaben nicht unterstützt:

<form>  <div>    <label for="month">      What month would you like to visit (June to Sept.)?    </label>    <input           type="month"      name="month"      min="2022-06"      max="2022-09"      required      pattern="[0-9]{4}-[0-9]{2}" />    <span></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 Musternnnn-nn entspricht, wobein eine Zahl von 0 bis 9 ist. Natürlich hindert dies die Leute nicht daran, ungültige Daten einzugeben (wie0000-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 dasjQuery-Datumsauswahler-Plug-in zu verwenden.

Beispiele

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

HTML

Das Formular, das den Monat und das Jahr anfragt, sieht folgendermaßen aus:

<form>  <div>    <label for="month-visit">What month would you like to visit us?</label>    <input type="month" name="month-visit" />    <span></span>  </div>  <p>What month would you like to visit us?</p>  <div>    <div>      <span>        <label for="month">Month:</label>        <select 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 name="year"></select>      </span>    </div>  </div></form>

Das<div> mit der IDnativeDatePicker verwendet denmonth-Eingabetyp, um Monat und Jahr zu erfragen, während das<div> mit der IDfallbackDatePicker 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;}

JavaScript

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, seinentype aufmonth zu setzen und prüfen dann sofort, welcher Typ eingestellt ist. Browser, die den Typmonth nicht unterstützen, gebentext zurück, damonth auftext 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 elementsconst 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 initiallyfallbackPicker.style.display = "none";fallbackLabel.style.display = "none";// Test whether a new date input falls back to a text input or notconst test = document.createElement("input");try {  test.type = "month";} catch (e) {  console.log(e.description);}// If it does, run the code inside the if () {} blockif (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 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">