Die Monatsauswahl ist ein Steuerelement, mit dem der Benutzer einen bestimmten Monat aus einem Kalender auswählt oder manuell eingibt. Diese Komponente wird häufig in Versicherungsanwendungen verwendet, bei denen Benutzer einen Monat angeben müssen, z. B. beim Auswählen des Startdatums einer Versicherungspolice oder beim Filtern von Daten nach Datum.
Wenn der Benutzer einen Monat eingeben muss, der in der fernen Vergangenheit oder Zukunft liegt. Verwenden Sie in diesem Fall die ](./simple-date-field.mdx)Datumseingabe[.
Wenn der Benutzer den Tag, den Monat und das Jahr auswählen muss. Verwenden Sie in diesem Fall die Datumsauswahl.
Wenn der Benutzer nur ein Jahr auswählen muss. Verwenden Sie in diesem Fall die Jahresauswahl.
Die Monatsauswahlkomponente besteht aus den folgenden Elementen:
Datumsauswahlfeld: Ein Eingabefeld, in das der Benutzer den Monat und das Jahr manuell eingeben kann.
Kalendersymbol: Eine Symbolschaltfläche, die den Dropdown-Kalender auslöst, wenn darauf geklickt wird.
Schaltfläche „Vorheriges Jahr“: Ein Navigationssteuerelement zum Anzeigen und Auswählen der Monate des Vorjahres.
Jahresschaltfläche: Ein Steuerelement zum Auswählen eines anderen Jahres.
Schaltfläche „Nächstes Jahr“: Ein Navigationssteuerelement zum Anzeigen und Auswählen der Monate des nächsten Jahres.
Ausgewählter Monat: Der spezifische Monat, der vom Benutzer ausgewählt und in der Monatsauswahl-Oberfläche hervorgehoben oder hervorgehoben wird.
Schaltfläche „Aktueller Monat“: Eine Schaltfläche, die das Monatsauswahlfeld automatisch mit dem aktuellen Monat und Jahr füllt, wenn darauf geklickt wird.
Beschriften Sie die Monatsauswahl mit einem klaren, beschreibenden Text. In dieser Beschriftung müssen der Zweck und die Art des ausgewählten Monats angegeben sein.
Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.
Verwenden Sie Hilfetext, um Kontext bereitzustellen und zu kommunizieren, welcher Monat ausgewählt werden soll. Hier einige Beispiele dafür, welche Informationen Sie angeben können:
Hinweise, die den Benutzer bei der Auswahl des entsprechenden Monats unterstützen
Mehr Kontext dafür, warum der Benutzer einen bestimmten Monat auswählen muss
Verwenden Sie Hilfetext nur für relevante Informationen. Vermeiden Sie es, die gleichen Angaben wie in der Beschriftung zu wiederholen. Schreiben Sie den Hilfetext in 1 bis 2 kurzen, vollständigen Sätzen, die mit einem Punkt enden. Verwenden Sie die übliche Groß- und Kleinschreibung.
Verwenden Sie Hilfetext, um Informationen zum Kontext zu geben.
Wiederholen Sie im Hilfetext nicht einfach die Informationen, die bereits in der Beschriftung stehen.
Die Benutzer können den Monat und das Jahr manuell in das Datumsauswahlfeld eingeben oder auf das Kalendersymbol klicken, um den Monat und das Jahr aus einer Dropdown-Liste auszuwählen.
Die Datumsauswahl wird mit Spacebar erweitert und reduziert. Benutzer navigieren mit den Pfeiltasten durch die Optionen und wählen mit der Spacebar- oder Enter-Taste eine Option aus.
Wenn der Benutzer mit der Tabulatortaste in das Eingabefeld für die Monatsauswahl wechselt, wird ein Kalender-Widget angezeigt. Das aktuelle Datum wird hervorgehoben und Nur-Tastatur-Benutzer können das Datum hier manuell eingeben. Durch Drücken der NACH-UNTEN-TASTE können Benutzer den Tastaturfokus auch auf das Widget legen, wenn es erweitert ist. Navigieren Sie mit den Pfeiltasten durch den Kalender. Die Schaltflächen „Zurück“, „Monat“, „Jahr“ und „Weiter“ können mit der Tab-Taste den Fokus erhalten, wenn das Widget geöffnet ist.
Wenn Benutzer mit der Tabulatortaste in das Eingabefeld für die Datumsauswahl wechseln, werden sie über den vorausgefüllten Datumswert informiert und darüber, dass dieser Wert aktuell aktiviert ist. In diesem Eingabefeld kann das Datum manuell eingegeben werden. Solange der Fokus auf dem vorausgefüllten Datum liegt, ist auch ein Kalender-Widget verfügbar. Benutzer können durch Drücken der Nach-Unten-Taste den Fokus auch auf das Widget verschieben. Die Navigation durch den Kalenderbereich des Widgets erfolgt über die Pfeiltasten. Der Wert, der aktuell den Fokus hat, wird von Screenreadern über das WAI-ARIA-Attribut aria-label ausgegeben. Die Schaltflächen „Zurück“, „Monat“, „Jahr“ und „Weiter“ können mit der Tab-Taste den Fokus erhalten, wenn das Widget geöffnet ist. Die React-Datumsauswahl aktiviert derzeit nicht die Tastaturnavigation zum Link „Heute“.
In der Monatsauswahl-Komponente können Benutzer die Einfügemarke (den blinkenden Textcursor) zwischen verschiedenen Abschnitten des Datums (MM/JJJJ) bewegen. Benutzer können jedoch keine einzelnen Ziffern innerhalb eines Abschnitts löschen. Durch Löschen einer Ziffer wird der gesamte Abschnitt (MM oder JJJJ) gelöscht, sodass Benutzer ihn erneut eingeben müssen. Dieses Verhalten ist bei allen Datumskomponenten einheitlich, bei denen die Eingabe in der Eingabemaske formatiert wird, während ein Benutzer die Eingabe vornimmt.
Das Kontrastverhältnis von Textelementen zu ihrem Hintergrund liegt über 4,5:1.
Nicht-textuelle Inhalte, die eine Bedeutung vermitteln sollen (z. B. Symbole und Fokusanzeigen), weisen ein Kontrastverhältnis von mindestens 3:1 zu den angrenzenden Farben auf.
Das jeweilige Element kann sowohl über eine Tastatur als auch über eine Maus bedient werden.
Der Zugriff auf die Inhalte erfolgt über Screenreader wie JAWS oder VoiceOver.
Die Konformität mit den Richtlinien für Barrierefreiheit hängt letztendlich davon ab, wie diese Komponente implementiert und angepasst wird. Vom Autor des Inhalts vorgenommene Änderungen können sich auf die Barrierefreiheit auswirken. Details zu unserem Modell der geteilten Verantwortung finden Sie in unserer Erklärung zur Barrierefreiheit von Jutro.
Achten Sie bei der Verwendung dieser Komponente darauf, dass die Beschriftung eindeutig angibt, welchen Monat der Benutzer eingeben oder auswählen muss.
Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.
If set to true, displays the component value in plain text. Consider using readonly instead, if possible, because plain text is worse for accessibility than readonly inputs.
Initial value of input. Value must be in object format with month and year property where month is indexed from 1. If value prop is specified along with this prop, this prop's value is discarded.
Value of input. Takes precedence over initialValue. Value must be in object format with month and year property where month is indexed from 1. If this prop is passed, component works in controlled mode and its value will change only if this prop changes.
Das Datum wird entsprechend dem ausgewählten Gebietsschema formatiert. Ist das Gebietsschema zum Beispiel en-US, wird das Datum 20. Januar 2024 folgendermaßen formatiert: „01/20/2024“. Wenn das Gebietsschema en-GB ist, wird es als „20/01/2024“ formatiert.
Die Jutro-Eingaben haben imperative Handler als Mechanismus implementiert, um Zugang zu einigen gängigen nativen Funktionen zu bieten, die für Sie nützlich sein könnten. Die folgenden Funktionen sind verfügbar:
Fokus setzen ermöglicht es, den Fokus des Benutzers auf eine bestimmte Komponente zu setzen.
Fokus aufheben ermöglicht es, den Fokus von der Komponente zu entfernen.
Zur Komponente scrollen ermöglicht es, den Benutzer zu einem bestimmten Bereich der Seite zu führen.
Diese Funktionen werden über die ref-Eigenschaft bereitgestellt, die sie wie folgt verfügbar macht:
Obwohl einige Jutro-Komponenten ergänzende Funktionen oder eine Hilfsfunktion zur Erleichterung des Validierungsprozesses bereitstellen, liegt es in Ihrer Verantwortung als Entwickler, die Validierung von Benutzereingaben (mit oder ohne Verwendung der ergänzenden Hilfsfunktionen) durchzuführen und zu entscheiden, welche Fehlermeldungen angezeigt werden sollen.
Das Verhalten von Jutro-Komponenten hängt von der Implementierung durch den Entwickler ab.
Wann werden Fehlermeldungen angezeigt?
Fehlermeldungen werden nur angezeigt, wenn Sie sie über die Eigenschaft stateMessages an die Komponente übergeben. Diese Eigenschaft empfängt ein Objekt mit dem folgenden Inhalt:
Die Komponente zeigt alle bereitgestellten Fehlermeldungen in der gleichen Reihenfolge wie im Array an.
Wann erfolgt die Validierung?
Dies ist Ihre Entscheidung als Entwickler. Da die Komponenten nicht festlegen, wann die Validierung durchgeführt wird oder wann der Fehler angezeigt werden muss, müssen Sie die Logik für die Behandlung entsprechend den Projektanforderungen implementieren, z. B. während der Benutzer den Inhalt bearbeitet, wenn die Komponente den Fokus verliert und bei der Formularübermittlung.
Wenn der Benutzer ein ungültiges Datum eingibt oder ein Datum, das außerhalb der Min/Max-Grenzen liegt, erhält er einen Validierungsfehler als dritten Parameter im onChange-Handler. Die Parameter sehen wie folgt aus:
{ errorCode:ERROR.<ERROR_CODE_GOES_HERE>, }
The error code can be one of the following:
INVALID_DATE - when the user enters an invalid date, for example "January 32nd".
MIN_DATE_EXCEEDED - when the user enters a date that is before minDate.
MAX_DATE_EXCEEDED - when the user enters a date that is after maxDate.
Im Abschnitt Verwendung finden Sie Informationen zum korrekten Design einer Monatsauswahl und zu den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.
Sie können dem Benutzer erlauben, einen Monat mithilfe der MonthPicker-Komponente auszuwählen. Verwenden Sie dann den Handler, um den ausgewählten Monat zu erhalten. Der Benutzer wählt eine Kombination aus Monat und Jahr aus.
Sie können die Monatsauswahl steuern, indem Sie die value-Eigenschaft übergeben. Dies ist nützlich, wenn Sie die Monatsauswahl als gesteuerte Komponente verwenden möchten.
Es empfiehlt sich, die Intl.DateTimeFormat-API zu verwenden, um den Monatsauswahlwert zu formatieren, da jedes Mal, wenn toLocaleString aufgerufen wird, eine Suche in einer großen Datenbank mit Lokalisierungszeichenfolgen durchgeführt werden muss, was potenziell ineffizient ist. Durch Erstellen eines Intl.DateTimeFormat-Objekts und Verwenden seiner format()-Methode kann dieses Problem vermieden werden, da sich ein DateTimeFormat-Objekt die übergebenen Argumente merkt und möglicherweise beschließt, einen Teil der Datenbank zwischenzuspeichern.
Sie können den Datumsbereich „min“ und „max“ angeben, um die Anzahl der gültigen Optionen einzuschränken, z. B. „Januar 2024“ und „Dezember 2024“ würde ihn auf einen beliebigen Monat im Jahr 2024 beschränken.
Es wurde die neue Komponente @jutro/components/MonthPicker eingeführt, welche MonthYearField ersetzt.
MonthYearField kann weiterhin aus @jutro/components/MonthYearField importiert werden, allerdings erhalten Sie eine Warnung, dass diese Aktion abgekündigt wurde.
