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.

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 hat immer ein Label, das erkennbar macht, dass eine Uhrzeit vom Nutzer eingegeben werden soll.

Zusätzlich kann im Time Picker ein Platzhaltertext platziert sein, der relevante Informationen beinhaltet (z.B. Format der Uhrzeit-Eingabe). Zudem verfügt er über das Time Picker Overlay, das die Auswahl einer Uhrzeit aus einer Liste ermöglicht.

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

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

States ​

Aktiv

Ein aktiver Time Picker 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.

Aktiver Time Picker

Fehlerhaft

Time Picker können validiert werden. Je nach Ergebnis der Validierung wird der Time Picker hervorgehoben. Im Fehlerzustand 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.

Time Picker mit Fehler

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.

Time Picker mit Hilfetext

Die Darstellung der States Inaktiv , Gesperrt , Hover und Fokus 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").

Develop Vue ​

Die Implementierung der Webcomponenten in Vue.js kann in folgendem Showcase innerhalb des AKDB Netzwerks betrachtet werden: https://mate-ds-vue-components-showcase-25.core-platform.kubt.akdb.net/?path=/docs/komponenten-time-picker--docs

Develop Flow ​

Der Showcase ist innerhalb des AKDB Netzwerks zu finden unter: https://mate-ds-flow-components-showcase-25.core-platform.kubt.akdb.net/?src=component%252Ftime-picker

Code Examples ​

Install ​

Maven ​

xml
<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-time-picker-flow</artifactId>
</dependency>

Import ​

java
import java.time.LocalTime;
import com.vaadin.flow.component.timepicker.TimePicker;

Variants ​

Default ​

java
TimePicker timePicker = new TimePicker();
timePicker.setLabel("Uhrzeit");
timePicker.setValue(LocalTime.of(11, 0));
timePicker.setHelperText("Format: HH:MM");

Read Only ​

java
TimePicker timePicker = new TimePicker();
timePicker.setLabel("Nur lesen");
timePicker.setValue(LocalTime.of(11, 0));
timePicker.setReadOnly(true);

Disabled ​

java
TimePicker timePicker = new TimePicker();
timePicker.setLabel("Inaktiv");
timePicker.setValue(LocalTime.of(11, 0));
timePicker.setEnabled(false);

Invalid ​

java
TimePicker timePicker = new TimePicker();
timePicker.setLabel("Ungültig");
timePicker.setValue(LocalTime.of(11, 0));
timePicker.setManualValidation(true);
timePicker.setInvalid(true);
timePicker.setErrorMessage("Bitte eine gültige Uhrzeit eingeben.");