Zum Hauptinhalt springen

Datumsauswahl

Datumsauswahl in Storybook

Verwendung​

Überblick​

Datumsauswahl ist eine Komponente, die aus zwei Hauptelementen besteht: einem Datumsauswahlfeld und einem Dropdown-Kalender. Die Kalenderkomponente stellt ein Datum visuell dar und bietet eine einheitliche Navigation durch Tages-, Monats- und Jahresansichten. Mit diesem Inline-Kalender können Benutzer Datumsangaben in einer Ansicht durchsuchen und auswählen.

Zu verwenden​

  • Auswahl eines in der Nähe des aktuellen Datums liegenden Datums.
  • Auswahl eines Datums und Speichern in einem Eingabefeld.
  • Durchsuchen verschiedener Datumsansichten, wie Tage, Monate und Jahre.
  • Zur visuellen Darstellung des Datums.

Nicht zu verwenden​

  • Auswahl eines in der fernen Vergangenheit oder Zukunft liegenden Datums. Verwenden Sie in diesem Fall die ](./simple-date-field.mdx)Datumseingabe[.
  • Auswahl eines Datumsbereichs. Verwenden Sie in diesem Fall den Datumsbereich.
  • Wenn Sie nur den Monat und das Jahr ohne einen bestimmten Tag auswählen möchten. Verwenden Sie in diesem Fall die Monatsauswahl.
  • Wenn Sie nur das Jahr auswählen möchten, ohne den Monat oder Tag anzugeben. Verwenden Sie in diesem Fall die Jahresauswahl.
  • Auswahl einer bestimmten Uhrzeit. Verwenden Sie in diesem Fall die Zeitauswahl.
Siehe auch​

Formatierung​

Aufbau​

Abbildung des Aufbaus der Datumsauswahl-Komponente

Die Datumsauswahl-Komponente besteht aus den folgenden Elementen:

  1. Datumsauswahlfeld: Ein Eingabefeld, in das der Benutzer den Tag, den Monat und das Jahr manuell eingeben kann.
  2. Kalendersymbol: Eine Symbolschaltfläche, die den Dropdown-Kalender auslöst, wenn darauf geklickt wird.
  3. Schaltfläche „Vorheriger Monat“: Ein Navigationssteuerelement zum Anzeigen und Auswählen von Daten aus dem Vormonat.
  4. Monatschaltfläche: Ein Steuerelement zum Auswählen eines anderen Monats.
  5. Jahresschaltfläche: Ein Steuerelement zum Auswählen eines anderen Jahres.
  6. Schaltfläche „Nächster Monat“: Ein Navigationssteuerelement zum Anzeigen und Auswählen von Daten aus dem Folgemonat.
  7. Aktuelles Datum: Das aktuelle Datum. Darunter wird eine Linie angezeigt, um es optisch hervorzuheben.
  8. Ausgewähltes Datum: Das vom Benutzer ausgewählte und in der Datumsauswahl hervorgehobene Datum.
  9. Schaltfläche „Heute“: Eine Schaltfläche, über die das Datumsauswahlfeld automatisch mit dem aktuellen Tag, Monat und Jahr ausgefüllt wird, wenn darauf geklickt wird.

Datumsformat​

Das Format des Datums, das in der Datumsauswahl angezeigt wird, hängt vom Gebietsschema des Benutzers ab. Das bedeutet, dass das Datumsformat je nach Standort und Spracheinstellungen des Benutzers variiert.

In den USA wird beispielsweise in der Regel das Datumsformat MM/DD/YYYY verwendet, in vielen europäischen Ländern hingegen das Format DD/MM/YYYY.

Das Datumsformat wird als Platzhalter in der Datumsauswahl angezeigt, um dem Benutzer die Datumseingabe zu erleichtern. Dadurch wird gewährleistet, dass das Format während des gesamten Eingabevorgangs sichtbar bleibt.

Abbildung eines Benutzers bei der Eingabe in das DatumsauswahlfeldEin Platzhalter im Eingabefeld führt den Benutzer während der Eingabe zum erwarteten Datumsformat.

Inhalt​

Allgemeine Richtlinien fürs Schreiben​

  • Verwenden Sie die Großschreibung des ersten Worts und von Substantiven für alle Aspekte der Gestaltung von Guidewire-Produktschnittstellen. Schreiben Sie nicht alles groß.
  • Verwenden Sie in den meisten Situationen Verben im Präsens und im Aktiv.
  • Verwenden Sie gebräuchliche Abkürzungen, um Ihrem Text einen natürlichen und informellen Ton zu verleihen.
  • Verwenden Sie eine einfache Sprache. Vermeiden Sie unnötigen Jargon und komplexe Sprache.
  • Halten Sie Wörter und Sätze kurz.

Eine Beschriftung einfügen​

Beschriften Sie die Datumsauswahl mit einem aussagekräftigen, beschreibenden Text. In dieser Beschriftung müssen der Zweck und das spezifische ausgewählte Datum angegeben sein.

Positionieren Sie eine dauerhafte Beschriftung außerhalb des Felds.
Verwenden Sie keinen Platzhaltertext als Ersatz für die Beschriftung.

Hilfetext hinzufügen, wenn es sinnvoll ist​

Verwenden Sie Hilfetext, um Kontext bereitzustellen und zu vermitteln, welches Datum ausgewählt werden soll. Hier einige Beispiele dafür, welche Informationen Sie angeben können:

  • Hinweise, die den Benutzer bei der Auswahl des entsprechenden Datums unterstützen
  • Mehr Kontext, warum der Benutzer ein bestimmtes Datum 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.

Verhalten​

Zustände​

Die Datumsauswahl-Komponente verhält sich wie ein Eingabefeld, mit den gleichen interaktiven Zuständen.

Interaktionen​

Maus​

Die Benutzer können den Tag, den Monat und das Jahr manuell im Datumsauswahlfeld eingeben oder auf das Kalendersymbol klicken, um den Tag, den Monat und das Jahr in einer Dropdown-Liste auszuwählen.

Abbildung eines Benutzers, der mithilfe einer Maus mit der Datumsauswahl interagiert

Tastatur​

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.

Screenreader​

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

Handhabung von Eingaben​

In der Datumsauswahl-Komponente können Benutzer die Einfügemarke (den blinkenden Textcursor) zwischen verschiedenen Abschnitten des Datums (MM/TT/JJJJ) bewegen. Benutzer können jedoch keine einzelnen Ziffern innerhalb eines Abschnitts löschen. Durch Löschen einer Ziffer wird der gesamte Abschnitt (MM, TT 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.

Barrierefreiheit​

Diese Komponente wurde validiert, um die Richtlinien für Barrierefreiheit WCAG 2.2 AA in der Standardbasiskonfiguration zu erfüllen. Dazu wird u. a. Folgendes sichergestellt:

  • 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, welches Datum der Benutzer eingeben oder auswählen muss.