Time Picker

Der Time Picker ist ein Eingabefeld mit dem eine Uhrzeit ausgewählt werden kann.

Overview

Intro

Der Time Picker ermöglicht es dem Nutzer eine Uhrzeit auszuwählen. Üblicherweise wird er innerhalb von Formularen verwendet.

broken_image

Figma

Time Picker

Verwendung

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

Guidelines

Aufbau

Der Time Picker setzt sich aus folgenden Bestandteilen zusammen. Label, Eingabefeld, Toggle button und Time Picker Overlay sind immer vorhanden, die als optional gekennzeichneten Elemente werden nur bei Bedarf ergänzt:

• Label — kennzeichnet das Feld. Für die Barrierefreiheit erforderlich. Unterstützt Plaintext-Inhalt; die Länge ist durch die Breite des Feldes begrenzt.
• Eingabefeld — nimmt die Uhrzeit auf, die der Nutzer eintippt, und zeigt die im Overlay gewählte Uhrzeit an.
• Toggle button — das Uhr-Icon am Ende des Feldes öffnet und schließt das Overlay. Er ist selbst nicht tastaturfokussierbar und für Screenreader ausgeblendet; im State Read Only wird er ausgeblendet.
• Time Picker Overlay — listet die auswählbaren Uhrzeiten auf, standardmäßig im Abstand von einer Stunde. Der Abstand folgt dem gesetzten Schrittwert; bei Schritten unter 15 Minuten bleibt die Liste leer und die Uhrzeit wird nur eingetippt.
• Helper text (optional) — erscheint unterhalb des Feldes. Geeignet, um das erwartete Format der Uhrzeit oder den zulässigen Zeitraum zu erläutern. Eine Style-Variante erlaubt die Darstellung oberhalb des Feldes.
• Placeholder (optional) — wird angezeigt, solange das Feld leer ist, und gibt einen kurzen Eingabehinweis, z.B. das Format 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.
• Prefix (optional) — Element am Anfang des Feldes. Ein Suffix gibt es nicht, denn am Ende des Feldes stehen bereits Clear button und Toggle button. Screenreader lesen das Prefix in der Regel nicht zuverlässig vor; die Information muss zusätzlich über Label oder Helper text verfügbar sein.
• Clear button (optional) — erscheint, sobald das Feld nicht leer ist, und löscht den aktuellen Wert. Der Button selbst ist nicht tastaturfokussierbar; bei fokussiertem Feld löscht die Escapetaste den Wert. Ist das Overlay geöffnet, schließt sie zunächst das Overlay.
• Required indicator (bei Bedarf) — Pflichtfelder werden durch einen Indikator neben dem Label gekennzeichnet. Die Kennzeichnung und ihre Erläuterung regelt Formulare .

Die Anordnung des Feldes im Formular und seine Spaltenbelegung regelt das Form Layout .

Info für Dev

In Web Components ist der Time Picker das Element <vaadin-time-picker> aus dem Paket @vaadin/time-picker. Das Paket ist in @mate/bundles enthalten.

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

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

Verhalten

Beim Klick auf das Uhrzeit Icon oder in den Time Picker, 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 Parser Verhalten ).

broken_image

Figma

Time Picker mit Overlay

Parser Verhalten

Der Parser beim Time Picker verhält sich wie nachfolgend dargestellt.

Fall 1

Falls eine oder zwei Ziffern eingegeben werden, wird die Uhrzeit zur vollen Stunde komplettiert.

7 → 07:00

15 → 15:00

Fall 2

Falls drei Ziffern eingegeben werden, werden die ersten Beiden als Stunde und die dritte als Minute interpretiert.

111 → 11:01

237 → 23:07

Fall 3

Falls vier Ziffern eingegeben werden, bilden die ersten zwei die Stunde und die hinteren zwei die Minuten. 

1023 → 10:23

2403 → 00:03

Fall 4

Falls fünf Ziffern eingegeben werden, bilden die ersten zwei die Stunde und die hinteren zwei die Minuten. Die fünfte Ziffer fällt weg. 

11237 → 11:23

Fall 5

Falls bei den Stunden Ziffern eingegeben werden, die größer gleich 24 sind, erfolgt eine besondere Berechnung. Es wird zunächst geprüft wie oft 24 in den Wert passt und dann die Zahl verwendet, die über die letzte 24 hinausgeht.  

2521 → 01:21 

3621 → 12:21 (36 Stunden = 24+12)

4621 → 22:21 (46 Stunden = 24+22)

5521 → 07:21 (55 Stunden = 24+24+7)

Fall 6

Falls bei den Minuten Ziffern eingegeben werden, die größer gleich 59 sind, wird eine Stunde plus die restlichen Minuten addiert, bis sich eine schlüssige Uhrzeit gibt.  

0080 → 01:20 (80 Minuten = +01:20)

Fall 7

Es ist zudem eine Kombination aus Fall 5 und Fall 6 möglich bei dem die Stunden größer gleich 24 angegeben werden und die Minuten größer gleich 59. In diesem Fall greifen die beiden Mechanismen aus Fall 5 und Fall 6 gleichzeitig und die Minuten werden auf die ermittelte Stunde addiert.

5599 → (55 Stunden = 24+24+7) + (99 Minuten = +01:39) = 08:39

Fall 8

Beim Verlassen des Feldes werden fehlende Doppelpunkte automatisch ergänzt.

0450 → 04:50

Validierung

Die Validierung erfolgt, wenn der Nutzer eine Wertänderung auslöst, z.B. durch Auswahl einer Uhrzeit im Overlay oder durch Eingabe und Drücken von Enter . Spätestens beim Verlassen des Feldes wird geprüft, auch wenn der Wert unverändert geblieben ist. Ist der Wert ungültig, wird das Feld rot hervorgehoben und eine Fehlermeldung erscheint unterhalb des Eingabefeldes.

Eine Eingabe, die sich nicht in eine Uhrzeit umsetzen lässt, macht das Feld ungültig.

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	Das Feld wird ungültig, wenn der Wert zunächst eingegeben und anschließend gelöscht wird.
Min / Max	Legen die früheste und die späteste erlaubte Uhrzeit fest. Das Overlay bietet nur Uhrzeiten innerhalb dieses Bereichs an; eine Uhrzeit außerhalb des Bereichs macht das Feld ungültig. Der erlaubte Bereich sollte über den Helper text kommuniziert werden.
Nicht parsbare Eingabe	Jede Eingabe, die nicht in eine gültige Uhrzeit umgesetzt werden kann, macht das Feld ungültig. Dieser Constraint ist nicht konfigurierbar und immer aktiv.

Das Intervall der Auswahlliste ist kein Constraint: Es legt fest, welche Uhrzeiten das Overlay anbietet und mit welcher Genauigkeit der Wert geführt wird. Eine eingetippte Uhrzeit, die nicht auf dem Raster der Auswahlliste liegt, bleibt gültig und wird nicht gerundet — beim Übernehmen entfallen lediglich die Stellen unterhalb der Genauigkeit, also je nach Intervall Sekunden und Millisekunden.

Jedes Constraint sollte eine eigene Fehlermeldung haben, damit der Nutzer spezifisches, umsetzbares Feedback erhält.

States

Enabled

Ein Time Picker im State Enabled kann vom Nutzer fokussiert werden und die Eingabe der Uhrzeit kann per Tastatur im Feld, oder über das Overlay erfolgen. Letzteres öffnet sich durch einen Klick in das Feld oder auf das Icon.

broken_image

Figma

Time Picker im State Enabled

Error

Time Picker können validiert werden. Je nach Ergebnis der Validierung wird der Time Picker hervorgehoben. Im State Error erscheint die Fehlermeldung unterhalb vom 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.

Hilfe-Text

Wenn nötig, kann unterhalb des Time Pickers ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

broken_image

Figma

Time Picker mit Hilfetext

Die Darstellung der States Disabled , Read Only , Hover und Focus entspricht der Standarddarstellung. Siehe States .

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist der Time Picker fokussierbar. Nach dem Öffnen des Overlays mit der Leertaste, können einzelne Uhrzeiten mit den Pfeiltasten angesteuert werden. Die Auswahl der Uhrzeit und das gleichzeitige Schließen des Time Picker Overlays erfolgt durch das Drücken der Wagenrückholtaste ("Return") oder durch das Drücken der Eingabetaste ("Enter").

Spezifische Hinweise

Die Komponente stellt selbst bereit: die Verknüpfung des sichtbaren Labels mit dem Eingabefeld, die Kennzeichnung von Pflichtfeldern über das native required am Eingabefeld, die Verknüpfung von Helper text und Fehlermeldung über aria\-describedby und die Ansage des Overlays über aria\-expanded . 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.
• 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. "Uhrzeit zwischen 08:00 und 18:00 eingeben" , 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 .