Get to know MDN better
Dieser Inhalt wurde automatisch aus dem Englischen übersetzt, und kann Fehler enthalten. Erfahre mehr über dieses Experiment.
Diese Funktion ist nicht Baseline, da sie in einigen der am weitesten verbreiteten Browser nicht funktioniert.
<input> Elemente des Typs month erstellen Eingabefelder, die es dem Benutzer ermöglichen, einen Monat und ein Jahr einzugeben, sodass ein Monat und ein Jahr leicht eingegeben werden können. Der Wert ist ein String, dessen Wert im Format YYYY-MM vorliegt, wobei YYYY das vierstellige Jahr und MM die Monatsnummer ist.
Die Benutzeroberfläche des Steuerelements variiert im Allgemeinen von Browser zu Browser; derzeit ist die Unterstützung lückenhaft, mit nur Chrome/Opera und Edge auf Desktops - und den meisten modernen mobilen Browser-Versionen -, die benutzbare Implementierungen haben. In Browsern, die month-Eingaben nicht unterstützen, fällt das Steuerelement auf <input type="text"> zurück, obwohl es möglicherweise eine automatische Validierung des eingegebenen Textes gibt, um sicherzustellen, dass er wie erwartet formatiert ist.
Für diejenigen unter Ihnen, die einen Browser verwenden, der month nicht unterstützt, zeigt der Screenshot unten, wie es in Chrome und Opera aussieht. Das Klicken auf den Abwärtspfeil auf der rechten Seite bringt einen Datumswähler hervor, der es Ihnen erlaubt, den Monat und das 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 repräsentiert (vier oder mehrstellige Jahr, dann ein Bindestrich (-), gefolgt vom zweistelligen Monat). Das Format des Monatsstrings, der von diesem Eingabetyp verwendet wird, ist in Monatsstrings beschrieben.
Sie können einen Standardwert für das Eingabesteuerelement setzen, indem Sie einen Monat und ein Jahr innerhalb des value Attributs angeben, wie folgt:
Eines ist zu beachten: Das angezeigte Datumsformat unterscheidet sich vom tatsächlichen value; die meisten Benutzeragenten zeigen den Monat und das Jahr in einer für die Region passenden Form an, basierend auf der eingestellten Region des Betriebssystems des Benutzers, während der Datumswert immer im Format yyyy-MM formatiert ist.
Wenn der obige Wert zum Beispiel an den Server gesendet wird, sieht er aus wie bday-month=1978-06.
Sie können den Datumswert auch in JavaScript mit der HTMLInputElement.value Eigenschaft abrufen und setzen, zum Beispiel:
Zusätzlich zu den gemeinsamen Attributen von <input> Elementen bieten Monatseingaben die folgenden Attribute.
Der Wert des list-Attributs ist die id eines <datalist>-Elements im selben Dokument. Das <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 aufgenommen. Die bereitgestellten Werte sind Vorschläge, keine Anforderungen: Benutzer können aus dieser vordefinierten Liste auswählen oder einen anderen Wert eingeben.
Das neueste Jahr und der Monat, im oben im Abschnitt Wert besprochenen Stringformat, die akzeptiert werden. Wenn der in das Element eingegebene value diesen überschreitet, schlägt das Element bei der Einschränkungsvalidierung fehl. Wenn der Wert des max-Attributs kein gültiger String im Format yyyy-MM ist, dann hat das Element keinen Maximalwert.
Dieser Wert muss ein Jahr-Monat-Paarung spezifizieren, die später oder gleich der im min-Attribut angegebenen ist.
Das früheste Jahr und der Monat, die akzeptiert werden, im selben oben beschriebenen Format yyyy-MM. Wenn der value des Elements weniger 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 Monatsstring ist, hat die Eingabe keinen Minimalwert.
Dieser Wert muss ein Jahr-Monat-Paarung sein, die früher oder gleich der im max-Attribut angegebenen ist.
Ein Boolesches Attribut, das, wenn vorhanden, bedeutet, dass dieses Feld vom Benutzer nicht bearbeitet werden kann. Sein value kann jedoch weiterhin durch JavaScript-Code, der direkt den Wert der HTMLInputElement.value Eigenschaft setzt, geändert werden.
Hinweis: Da ein schreibgeschütztes Feld keinen Wert haben kann, hat required keine Wirkung auf Eingaben, bei denen das readonly-Attribut ebenfalls spezifiziert ist.
Das step-Attribut ist eine Zahl, die die Granularität angibt, an die der Wert gebunden sein muss, oder der spezielle Wert any, der unten beschrieben wird. Nur Werte, die eine ganze Anzahl von Schritten vom Schrittbasis entfernt sind, sind gültig. Die Schrittbasis ist min (#min) wenn angegeben, value andernfalls, oder 0 (der Unix-Epoch, 1970-01) wenn keines bereitgestellt wird.
Für month-Eingaben wird der Wert von step in Monaten angegeben. Der Standardwert von step ist 1, was 1 Monat bedeutet.
Ein Stringwert von any bedeutet, dass kein Schritt impliziert ist und jeder Wert erlaubt ist (außer andere Einschränkungen wie min und max). In der Praxis hat es jedoch den gleichen Effekt wie 1 bei month-Eingaben, weil die Auswahloberfläche der Benutzeroberfläche nur ganze Monate auswählt.
Hinweis: Wenn die vom Benutzer eingegebenen Daten nicht der Schrittkonfiguration entsprechen, kann der Benutzeragent auf den nächstgelegenen gültigen Wert runden und Präferenz für Zahlen in positiver Richtung haben, wenn zwei gleichnahe Optionen existieren.
Datumsbezogene Eingaben (einschließlich month) klingen auf den ersten Blick bequem; sie versprechen eine einfache Benutzeroberfläche zur Auswahl von Daten und normalisieren das an den Server gesendete Datenformat, unabhängig von der Region des Benutzers. Es gibt jedoch Probleme mit <input type="month">, da viele große Browser es derzeit nicht unterstützen.
Wir schauen uns grundlegende und komplexere Anwendungsfälle von <input type="month"> an und bieten dann im Abschnitt Umgang mit Browserunterstützung Ratschläge zur Minderung des Browserunterstützungsproblems an.
Die grundlegendste Verwendung von <input type="month"> beinhaltet eine Kombination aus einem einfachen <input> und <label> Element, wie unten gezeigt:
Sie können die min und max Attribute verwenden, um den Bereich der wählbaren Daten zu beschränken. Im folgenden Beispiel geben wir einen Minimalmonat von 1900-01 und einen Maximalmonat von 2013-12 an:
Das Ergebnis hier ist, dass:
<input type="month"> unterstützt keine Größenattribute für Formulare wie size. Für Größenanforderungen müssen Sie auf CSS zurückgreifen.
Standardmäßig wendet <input type="month"> keine Validierung auf eingegebene Werte an. Die Benutzeroberflächenimplementierungen lassen Sie im Allgemeinen zwar nichts eingeben, was kein Datum ist - was hilfreich ist - aber Sie können das Formular dennoch mit leerer month-Eingabe einreichen 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 Einstellen maximaler und minimaler Daten), und zusätzlich das required Attribut verwenden, um das Ausfüllen des Datums obligatorisch zu machen. Unterstützende Browser zeigen dann einen Fehler an, 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 außerdem das Feld als erforderlich angegeben:
Wenn Sie versuchen, das Formular zu senden, ohne den Monat und das Jahr angegeben zu haben (oder mit einem Datum außerhalb der festgelegten Grenzen), zeigt der Browser einen Fehler an. Probieren Sie das Beispiel jetzt aus:
Hier ist ein Screenshot für diejenigen unter Ihnen, die einen nicht unterstützenden Browser verwenden:
Hier ist das CSS, das im obigen Beispiel verwendet wird. 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 Symbole auf einem <span> neben der Eingabe platzieren, nicht auf der Eingabe selbst, da in Chrome der generierte Inhalt innerhalb des Formularelements platziert wird und nicht effektiv gestylt oder angezeigt werden kann.
Warnung: HTML-Formularvalidierung ist kein Ersatz für Skripte, die sicherstellen, dass die eingegebenen Daten im richtigen Format sind. Es ist viel zu einfach für jemanden, Änderungen am HTML vorzunehmen, die es ihnen ermöglichen, die Validierung zu umgehen oder sie ganz zu entfernen. Es ist auch möglich, dass jemand Ihr HTML vollständig umgeht und die Daten direkt an Ihren Server sendet. Wenn Ihr serverseitiger Code die empfangenen Daten nicht validiert, könnte eine Katastrophe eintreten, wenn unrichtig formatierte Daten (oder Daten, die zu groß sind, vom falschen Typ, usw.) eingereicht werden.
Wie oben erwähnt, besteht das Hauptproblem bei der Verwendung von Datumseingaben derzeit darin, dass viele große Browser sie noch nicht implementiert haben; nur Chrome/Opera und Edge unterstützen sie auf Desktop, und die meisten modernen Browser auf mobilen Geräten. Als Beispiel sieht der month-Picker auf Chrome für Android so aus:
Nicht unterstützende Browser fallen zurück auf eine Texteingabe, was Probleme sowohl in Bezug auf die Konsistenz der Benutzeroberfläche (das präsentierte Steuerelement wird unterschiedlich sein) als auch in Bezug auf die Datenverarbeitung schafft.
Das zweite Problem ist das ernstere der beiden. Wie bereits erwähnt, wird bei einer month-Eingabe der tatsächliche Wert immer im Format yyyy-mm normalisiert. Andererseits hat eine text-Eingabe in ihrer Standardkonfiguration keine Vorstellung davon, in welchem Format das Datum vorliegen sollte, und dies ist ein Problem aufgrund der Vielzahl verschiedener Arten, wie Menschen Daten schreiben. Zum Beispiel:
Eine Möglichkeit, dies zu umgehen, besteht darin, ein pattern-Attribut auf Ihrer month-Eingabe zu platzieren. Auch wenn die month-Eingabe es nicht verwendet, wird das Muster verwendet, wenn der Browser sie als text-Eingabe behandelt. Zum Beispiel versuchen Sie, die folgende Demo in einem Browser zu betrachten, der month-Eingaben nicht unterstützt:
Wenn Sie versuchen, es einzureichen, werden Sie feststellen, dass der Browser nun eine Fehlermeldung anzeigt (und die Eingabe 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 folgen, einzugeben.
Es gibt auch das Problem, dass der Benutzer nicht unbedingt weiß, welches der vielen Datumsformate erwartet wird. Wir haben noch Arbeit vor uns.
Der beste Weg, um mit Daten in Formularen auf plattformübergreifende Weise umzugehen (bis alle großen Browser sie für eine Weile unterstützt haben), besteht darin, den Benutzer zu bitten, den Monat und das Jahr in separaten Steuerelementen (<select>-Elemente sind beliebt; siehe unten für eine Implementierung) einzugeben oder JavaScript-Bibliotheken wie das jQuery-Datumsauswahl-Plugin zu verwenden.
In diesem Beispiel erstellen wir zwei Sätze von UI-Elementen, die jeweils entworfen sind, um dem Benutzer die Auswahl eines Monats und eines Jahres zu ermöglichen. 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 zu wählen, für Kompatibilität mit Browsern, die <input type="month"> noch nicht unterstützen.
Das Formular, das den Monat und das Jahr anfordert, sieht folgendermaßen aus:
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 von <select>-Elementen verwendet. Das erste erfragt den Monat und das zweite das Jahr.
Das <select> zur Auswahl des Monats ist mit den Namen der Monate vordefiniert, da sie sich nicht ändern (außerhalb der Berücksichtigung von Lokalisierung). Die Liste der verfügbaren Jahrwerte wird dynamisch je nach aktuellem Jahr generiert (siehe die Codekommentare unten für detaillierte Erklärungen, wie diese Funktionen funktionieren).
Der JavaScript-Code, der die Auswahl der zu verwendenden Methode und die Einrichtung der Liste der Jahre für die nicht-native Jahr-<select> behandelt, 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 Typ 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 das passiert, wenn month nicht unterstützt wird. Wenn <input type="month"> nicht unterstützt wird, blenden wir den nativen Picker aus und zeigen stattdessen die Rückfall-Picker-Benutzeroberfläche an.
Hinweis: Denken Sie daran, dass einige Jahre 53 Wochen haben (siehe Wochen pro Jahr)! Dies müssen Sie bei der Entwicklung von Produktionsanwendungen berücksichtigen.
| Wert | Ein String, der einen Monat und Jahr repräsentiert, oder leer. |
| Ereignisse | [`change`](/de/docs/Web/API/HTMLElement/change_event) und [`input`](/de/docs/Web/API/Element/input_event) |
| Unterstützte gemeinsame Attribute | autocomplete, list, readonly, step |
| IDL-Attribute | list, value, valueAsDate, valueAsNumber |
| DOM-Schnittstelle | [`HTMLInputElement`](/de/docs/Web/API/HTMLInputElement) |
| Implizite ARIA-Rolle | keine entsprechende Rolle |
| HTML # month-state-(type=month) |
JavaScript aktivieren, um diese Browser-Kompatibilitätstabelle anzuzeigen.
Der Bauplan für ein besseres Internet.
Teile dieses Inhalts sind ©1998–2026 von einzelnen mozilla.org-Mitwirkenden. Inhalte sind verfügbar unter einer Creative-Commons-Lizenz.