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

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

Die Komponente ist eine Zusammensetzung aus dem  Date Picker  und dem  Time Picker . Der Date Time Picker hat immer ein Label, das erkennbar macht, dass ein Datum und eine Uhrzeit vom Nutzer eingegeben werden soll. Zusätzlich kann in den Feldern des Date Time Picker ein Platzhaltertext platziert sein, der zusätzliche relevante Informationen beinhaltet (z.B. Format der Datums-Eingabe oder Uhrzeit-Eingabe). Der Date Picker innerhalb der Komponente verfügt über das Date Picker Overlay, das einen Kalender anzeigt. Der Time Picker innerhalb der Komponente verfügt über das Time Picker Overlay, das die Auswahl einer Uhrzeit aus einer Liste ermöglicht.

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

	Geöffneter Date Picker (innerhalb des Date Time Picker)
	Geöffneter Date Picker beim hovern mit der Maus über einem Tag (innerhalb des Date Time Picker)
	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 ).

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

States

	Aktiv Ein aktiver Date Time Picker 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.
	Disabled Ein Date Time Picker kann inaktiv sein, wenn er sich durch bestimmte Vorbedingungen (noch) nicht ändern lässt. Er wird erst aktiv, wenn die Vorbedingungen erfüllt sind. Ein inaktiver Date Time Picker lässt sich nicht durch den Nutzer ändern.
	Read Only Ein Date Time Picker kann für den Nutzer gesperrt 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 inaktiven Eingabefeld, kann das gesperrte Feld nicht unter bestimmten Bedingungen aktiv werden.
	Hover Ein aktiver Date Time Picker wird hervorgehoben, wenn der Nutzer den Mauszeiger über das Feld bewegt.
	Fokus 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.
	Fehlerhaft Date Time Picker können validiert werden. Je nach Ergebnis der Validierung wird der Date Time Picker hervorgehoben. Im Fehlerzustand 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 .
	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  T ime 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.

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-date-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%252Fdate-time-picker

Code Examples

Install

Maven

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

Import

import com.vaadin.flow.component.datetimepicker.DateTimePicker;
import java.time.LocalDateTime;

Variants

Default

DateTimePicker dateTimePicker = new DateTimePicker("Date and time");
dateTimePicker.setValue(LocalDateTime.of(2024, 1, 1, 11, 0));
dateTimePicker.setHelperText("Helper text");

Read Only

DateTimePicker dateTimePicker = new DateTimePicker("Read only");
dateTimePicker.setValue(LocalDateTime.of(2024, 1, 1, 11, 0));
dateTimePicker.setReadOnly(true);

Disabled

DateTimePicker dateTimePicker = new DateTimePicker("Disabled");
dateTimePicker.setValue(LocalDateTime.of(2024, 1, 1, 11, 0));
dateTimePicker.setEnabled(false);

Invalid

DateTimePicker dateTimePicker = new DateTimePicker("Invalid");
dateTimePicker.setValue(LocalDateTime.of(2024, 1, 1, 11, 0));
dateTimePicker.setManualValidation(true);
dateTimePicker.setInvalid(true);
dateTimePicker.setErrorMessage("Error message");