Month Year Picker ​

Der Month Year Picker ist ein Eingabefeld, mit dem ein Monat in einem bestimmten Jahr ausgewählt werden kann.

Overview ​

Intro ​

Der Month Year Picker ermöglicht dem Nutzer, einen Monat und das zugehörige Jahr auszuwählen. Üblicherweise wird er innerhalb von Formularen verwendet, beispielsweise zur Angabe von Gültigkeitszeiträumen.

Month Year Picker

Verwendung ​

👍 Do👎 Don't
... wenn ein Monat und ein Jahr erfasst werden soll (z.B. in einem Formular für eine Gültigkeit).... wenn ein exaktes Datum erfasst werden soll (siehe hierzu Date Picker).
... wenn ein Datumsbereich erfasst werden soll (siehe hierzu Datumsbereich durch Range Selector).
... wenn ein Datum und eine Uhrzeit erfasst werden soll (siehe hierzu Date Time Picker).
... wenn eine Uhrzeit erfasst werden soll (siehe hierzu Time Picker).

Guidelines ​

Aufbau ​

Der Month Year Picker hat immer ein Label, das erkennbar macht, welche Eingabe vom Nutzer erwartet wird. Zusätzlich kann im Eingabefeld ein Platzhaltertext platziert sein, der zusätzliche relevante Informationen beinhaltet (z.B. das Format der Eingabe MM.JJJJ ). Zudem verfügt er über ein Kalender-Icon und das zugehörige Month Year Picker Overlay, das eine Jahres- und Monatsauswahl anzeigt.

Verhalten ​

Beim Klick auf das Kalender-Icon oder in das Eingabefeld klappt das Month Year Picker Overlay auf. Hier kann der Nutzer oben durch die Jahre schalten und darunter einen der zwölf Monate auswählen. Bewegt der Nutzer die Maus über einen Monat, wird dieser farblich hervorgehoben. Beim Klick auf einen Monat wird die Auswahl (Monat und Jahr) übernommen und das Overlay schließt sich. Des Weiteren ist es auch möglich, den Monat und das Jahr per Tastatur direkt in das Feld einzutippen. Der aktuelle Monat ist zudem auch farblich und durch einen Unterstrich hervorgehoben.

Geöffneter Month Year Picker
Month Year Picker Hover über Monat
Month Year Picker mit ausgewähltem Monat

Parser Verhalten ​

Der Parser, der beim Month Year Picker eingebunden werden kann, verhält sich wie nachfolgend dargestellt:

​

Aktuelles Verhalten ​

Beim Verlassen des Feldes wird der Monat immer mit zwei Stellen angegeben. Falls notwendig, wird eine führende Null ergänzt. 7.2025 → 07.2025

​

States ​

Die Darstellung der States Aktiv, Fehlerhaft, Inaktiv, Read Only, Hover und Fokus entspricht der Standarddarstellung (siehe States .). Zudem ist die Verwendung eines Hilfe-Texts unterhalb des Felds möglich.

Barrierefreiheit ​

Tastaturbedienung

Über die Tabulatortaste ( Tab ) oder Shift + Tab ist der Month Year Picker fokussierbar.

Das Overlay kann mit der Leertaste geöffnet werden. Innerhalb des Overlays gilt:

  • Mit der Tabulatortaste können die Pfeiltasten Links/Rechts fokussiert werden. Durch ein Betätigen von Leertaste oder Enter kann zwischen den Jahren gewechselt werden.
  • Innerhalb des Monatsrasters nachdem man dorthin mit der Tabulatortaste navigiert hat, können mit allen Pfeiltasten (Hoch, Runter, Links, Rechts) die einzelnen Monate fokussiert werden. Durch ein Betätigen von Leertaste oder Enter kann ein Monat ausgewählt werden werden. Das Overlay schließt sich dabei.
  • Mit der Escape -Taste wird das Overlay geschlossen, ohne eine Auswahl zu treffen.