Date Time Picker

Der Date Time Picker ermöglicht es Nutzenden ein Datum und eine Uhrzeit auszuwählen. Üblicherweise wird er innerhalb von Formularen verwendet. 

Overview

Intro

broken_image

Figma

Date Time Picker

Verwendung

👍 Do	👎 Don't
... wenn ein Datum und eine Uhrzeit erfasst werden soll (z.B. in einem Formular)	... wenn nur ein Datum erfasst werden soll (siehe hierzu Date Picker) ... wenn ein Datumsbereich erfasst werden soll (siehe hierzu Datumsbereich durch Bereichsauswahl) ... wenn eine Uhrzeit erfasst werden soll (siehe hierzu Time Picker)

Guidelines

Aufbau

Der Date Time Picker ist eine Zusammensetzung aus dem Date Picker und dem Time Picker . Er setzt sich aus folgenden Bestandteilen zusammen. Das gemeinsame Label über beiden Feldern und die beiden Eingabefelder sind immer vorhanden, die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Label — kennzeichnet die gesamte Gruppe. Für die Barrierefreiheit erforderlich. Beide Eingabefelder leiten ihren zugänglichen Namen daraus ab; eine unterscheidende Zusatzbezeichnung für Datum und Uhrzeit ist zu ergänzen (siehe Barrierefreiheit).
• Eingabefelder — das erste Feld ist ein Date Picker, das zweite ein Time Picker. Beide bringen ihren eigenen Toggle button und ihr eigenes Overlay mit: der Date Picker das Date Picker Overlay mit dem Kalender, der Time Picker das Time Picker Overlay mit der Liste der Uhrzeiten. Die Einzelheiten dazu stehen auf den Seiten Date Picker und Time Picker .
• Helper text (optional) — erscheint unterhalb der beiden Felder und gilt für die gesamte Gruppe. Geeignet, um die erwarteten Formate von Datum und Uhrzeit zu erläutern. Eine Style-Variante erlaubt die Darstellung oberhalb der Felder.
• Placeholder (optional) — wird je Feld getrennt gesetzt, einer für das Datum und einer für die Uhrzeit, und gibt jeweils einen kurzen Eingabehinweis, z.B. das Format der Datums- oder der Uhrzeit-Eingabe. Er ist nur zu verwenden, wenn kein Helper text möglich ist, ersetzt kein sichtbares Label und kann für einen bereits eingegebenen Wert gehalten werden.
• Tooltip (optional) — kleines Text-Pop-up, das bei Hover und bei Tastatur-Fokus angezeigt wird. Helper werden gegenüber Tooltips generell bevorzugt, da sie besser auffindbar und mobil besser unterstützt sind.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet; er gilt für beide Felder zugleich. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Einen eigenen Clear button sowie Prefix- und Suffix-Elemente bietet die Gruppe nicht an.

Die Anordnung der Gruppe im Formular und ihre Spaltenbelegung regelt das Form Layout .

Info für Dev

In Web Components ist der Date Time Picker das Element <vaadin-date-time-picker> aus dem Paket @vaadin/date-time-picker. Es erzeugt die beiden inneren Elemente <vaadin-date-picker> und <vaadin-time-picker> selbst. Alle drei Pakete sind in @mate/bundles enthalten.

In Vue liegt er im Paket @mate-vue/date-time-picker und heißt MateDateTimePicker.

In Flow stammt die Klasse DateTimePicker aus dem Maven-Artefakt vaadin-date-time-picker-flow der groupId com.vaadin und dem Paket com.vaadin.flow.component.datetimepicker.

Verhalten

Beim Klick auf das Date Picker Icon oder in den Date Picker innerhalb der Komponente, klappt das Date Picker Overlay auf. Hier kann der Nutzer durch die verschiedenen Monate und Jahre scrollen. Bewegt der Nutzer die Maus über einen Tag wird dieser farblich hervorgehoben. Beim Klick auf einen Tag wird das Datum ausgewählt. Des Weiteren ist es auch möglich das Datum per Tastatur einzutippen (siehe Abschnitt Parser Verhalten beim  Date Picker ). 

broken_image Figma	Geöffneter Date Picker (innerhalb des Date Time Picker)
broken_image Figma	Geöffneter Date Picker beim hovern mit der Maus über einem Tag (innerhalb des Date Time Picker)
broken_image Figma	Geöffneter Date Picker mit ausgewähltem Tag (innerhalb des Date Time Picker)

Beim Klick auf das Uhrzeit Icon oder in den Time Picker innerhalb der Komponente, klappt das Time Picker Overlay auf. Hier kann der Nutzer durch verschiedenen Uhrzeiten scrollen. Bewegt der Nutzer die Maus über einer Uhrzeit wird diese farblich hervorgehoben. Beim Klick auf eine Uhrzeit wird diese ausgewählt. Des Weiteren ist es auch möglich eine Uhrzeit per Tastatur einzutippen (siehe Abschnitt Parser Verhalten beim  Time Picker ). 

broken_image Figma	Geöffneter Time Picker (innerhalb des Date Time Picker)
broken_image Figma	Geöffneter Time Picker beim hovern mit der Maus über einer Uhrzeit (innerhalb des Date Time Picker)
broken_image Figma	Geöffneter Time Picker mit ausgewählter Uhrzeit (innerhalb des Date Time Picker)

Validierung

Die Validierung erfolgt, wenn der Nutzer eine Wertänderung auslöst. Spätestens beim Verlassen der Komponente wird geprüft; der Wechsel zwischen dem Datums- und dem Uhrzeitfeld und das Öffnen eines Overlays gelten dabei nicht als Verlassen. Solange erst eines der beiden Felder gefüllt und für sich gültig ist, wird die Meldung zurückgehalten, damit der Nutzer die Eingabe zu Ende führen kann.

Sobald eines der beiden Felder gefüllt ist, muss auch das andere gefüllt sein: Ein Datum ohne Uhrzeit oder eine Uhrzeit ohne Datum macht die Komponente ungültig. Bleiben beide Felder leer, ist der Date Time Picker gültig, sofern er kein Pflichtfeld ist. Hervorhebung und Fehlermeldung gelten für die gesamte Komponente, nicht für das einzelne Feld. Welche Eingaben die beiden Felder für sich annehmen und wie sie geprüft werden, steht unter Date Picker und Time Picker .

Die Prüfung läuft in zwei Stufen. Die Pre-Submit-Validierung prüft das einzelne Feld, sobald es den Fokus verliert, und zeigt den Fehler unmittelbar unterhalb des Feldes. Die Post-Submit-Validierung läuft, nachdem der Nutzer das Formular abgeschickt hat: Sie prüft alle Felder erneut, markiert die fehlerhaften und setzt den Fokus auf das erste davon. Beide Stufen und die Formulierung der Fehlermeldungen sind unter Validierung unter Formulare beschrieben.

Folgende Constraints werden unterstützt:

Constraint	Verhalten
Required	Wirkt auf beide Felder gleichzeitig. Bleibt eines von beiden leer, wird der Date Time Picker ungültig.
Min / Max	Legen den frühesten und den spätesten erlaubten Zeitpunkt als Kombination aus Datum und Uhrzeit fest. Am frühesten und am spätesten erlaubten Tag schränkt die Grenze zusätzlich die wählbaren Uhrzeiten ein, an allen übrigen Tagen steht der volle Tag zur Verfügung.

Die Fehlermeldung benennt, welche Angabe fehlt oder außerhalb des erlaubten Zeitraums liegt, damit der Nutzer spezifisches, umsetzbares Feedback erhält.

States

broken_image Figma	Enabled Ein Date Time Picker im State Enabled kann vom Nutzer fokussiert werden und die Eingaben des Datums und der Uhrzeit können per Tastatur im Feld, oder über die Overlays erfolgen. Letztere öffnen sich durch einen Klick in das Feld oder auf die Icons.
broken_image Figma	Disabled Ein Date Time Picker kann Disabled sein, wenn er sich durch bestimmte Vorbedingungen (noch) nicht ändern lässt. Er wechselt erst in den State Enabled, wenn die Vorbedingungen erfüllt sind. Ein Date Time Picker im State Disabled lässt sich nicht durch den Nutzer ändern.
broken_image Figma	Read Only Ein Date Time Picker kann für den Nutzer auf Read Only gesetzt sein. In diesem Fall dient das Feld lediglich als Anzeige der evtl. vorhandenen eingegebenen Daten. Die Daten können nicht durch den Nutzer geändert werden. Im Unterschied zum Eingabefeld im State Disabled, kann ein Feld im State Read Only nicht unter bestimmten Bedingungen in den State Enabled wechseln.
broken_image Figma	Hover Ein Date Time Picker im State Enabled wird hervorgehoben, wenn der Nutzer den Mauszeiger über das Feld bewegt.
broken_image Figma	Focus Der Date Time Picker kann fokussiert werden. Der Fokus kann z.B. über die Tastaturbedienung gesetzt werden. Ist bereits ein Datum oder eine Uhrzeit eingegeben, wird dieser Wert beim Fokussieren des Feldes ausgewählt.
broken_image Figma	Error Date Time Picker können validiert werden. Je nach Ergebnis der Validierung wird der Date Time Picker hervorgehoben. Im State Error erscheint die Fehlermeldung unterhalb vom Date Time Picker und das Feld wird rot hervorgehoben. Die Fehlermeldung sollte so formuliert werden, dass dem Nutzer klar ist, wie der entstandene Validierungsfehler behoben werden kann, siehe dazu auch Validierung unter  Formulare .
broken_image Figma	Hilfe-Text Wenn nötig, kann unterhalb des Date Time Picker ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

Parser Verhalten

Alle Informationen zum Parser Verhalten des Date Pickers sind im Abschnitt Parser Verhalten beim  Date Picker  zu finden. Alle Informationen zum Parser Verhalten des Time Pickers sind im Abschnitt Parser Verhalten beim  Time Picker  zu finden. 

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") sind der Date Picker und der Time Picker, die Teil des Date Time Picker sind, fokussierbar.

Alle Informationen zur Tastaturbedienung des Date Picker sind unter dem Abschnitt Barrierefreiheit beim  Date Picker  zu finden. 

Alle Informationen zur Tastaturbedienung des Time Picker sind unter dem Abschnitt Barrierefreiheit beim  Time Picker  zu finden.

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit beiden Eingabefeldern, die Kennzeichnung von Pflichtfeldern über aria\-required und die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby . Zusätzlich fasst sie das Datums- und das Uhrzeitfeld zu einer Gruppe zusammen und leitet den zugänglichen Namen beider Felder aus dem Label der Komponente ab. Nichts davon wird nachgebaut. Das Produktteam verantwortet die Inhalte:

• Da jedes Eingabefeld ein Label haben muss, ist kein zusätzliches aria\-label nötig. Ein am Feld gesetztes aria\-label ersetzt den Namen aus dem sichtbaren Label und darf deshalb nur bei Feldern ohne sichtbares Label verwendet werden.
• Datums- und Uhrzeitfeld tragen ohne weitere Angabe denselben zugänglichen Namen, nämlich das Label der Komponente. Damit Screenreader beide unterscheiden können, ergänzt das Produktteam über die Sprachtexte der Komponente je eine Zusatzbezeichnung für das Datums- und das Uhrzeitfeld.
• Der Platzhalter ist kein Ersatz für das Label und wird nicht zuverlässig vorgelesen. Formathinweise gehören in das Label oder in den Helper text.
• Ein Feld, das dauerhaft nur der Anzeige dient, wird auf Read Only gesetzt: Es bleibt fokussierbar, für Screenreader sichtbar und sein Wert kopierbar. Ein Feld, das im Laufe des Prozesses wieder bearbeitbar werden kann, wird auf Disabled gesetzt: Es ist nicht fokussierbar und für Screenreader unsichtbar und eignet sich deshalb nicht zur Anzeige von Informationen. Siehe States .
• Fehlermeldung: Die Verknüpfung mit dem Eingabefeld stellt die Komponente her. Das Produktteam verantwortet den Text — er muss sagen, wie der Fehler zu beheben ist (z.B. "Datum und Uhrzeit vollständig angeben" , nicht nur "Fehler" ), und der Fehler darf nicht ausschließlich über Farbe kommuniziert werden.
• Pflichtfeld-Kennzeichnung: Wie Pflichtfelder gekennzeichnet und erklärt werden, regelt Formulare .