Date Picker

Der Date Picker ist ein Eingabefeld, mit dem ein Datum ausgewählt werden kann.

Overview

Intro

Der Date Picker ermöglicht dem Nutzer ein Datum auszuwählen. Üblicherweise wird er innerhalb von Formularen verwendet.

Beispiel Date Picker

Verwendung

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

Guidelines

Aufbau

Der Date Picker hat immer ein Label, das erkennbar macht, dass ein Datum vom Nutzer eingegeben werden soll. Zusätzlich kann im Date Picker ein Platzhaltertext platziert sein, der zusätzliche relevante Informationen beinhaltet (z.B. Format der Datums-Eingabe). Zudem verfügt er über das Date Picker Overlay, das einen Kalender anzeigt.

Verhalten

Beim Klick auf das Date Picker Icon oder in den Date Picker 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. Das aktuelle Datum ist zudem auch farblich und durch einen Unterstrich hervorgehoben.

	Geöffneter Date Picker
	Beim Hovern über einem Tag
	Mit ausgewähltem Tag

Parser Verhalten

Der Parser, der beim Date Picker eingebunden werden kann, verhält sich wie nachfolgend dargestellt:

Fall 1

Falls eine oder zwei Ziffern eingegeben werden, wird das Datum mit aktuellem Monat und Jahr komplettiert.

7 → 07.11.2019

15 → 15.11.2019

Fall 2

Falls drei Ziffern eingegeben werden, werden die ersten Beiden als Tag und die dritte als Monat interpretiert, komplettiert mit dem aktuellen Jahr.

111 → 11.01.2019

237 → 23.07.2019

Fall 3

Falls vier Ziffern eingegeben werden, wird das Datum mit aktuellem Jahr komplettiert.

2403 → 24.03.2019

Fall 4

Falls fünf Ziffern eingegeben werden, werden die Ziffern eins und zwei als Tag, die Ziffern drei und vier als Monat und Ziffer fünf als Teilangabe eines Jahres interpretiert. In diesem Fall wird das Jahr zum aktuellen Jahrhundert mit Dekade 0 komplettiert.

26117 → 26.11.2007: Die Dekade wird mit einer führenden 0 ergänzt, analog dem Verhalten bei Monaten.

Fall 5

Falls sechs Ziffern eingegeben werden, werden die letzten beiden Ziffern als Jahresangabe im aktuellen Jahrhundert interpretiert.

260318 → 26.03.2018

Fall 6

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

01012019 → 01.01.2019

Fall 7

Beim Verlassen des Feldes, werden Tag und Monat immer mit zwei Stellen angegeben. Fall notwendig wird eine führende Null ergänzt.

6.3.18 → 06.03.2018

Fall 8

Falls das erste Zeichen ein Operator ist ( +(plus), -(minus) ) wird der nachfolgende Zeitraum zum aktuellen Tagesdatum hinzugerechnet. Ein Zeitraum besteht aus einer (positiven) Zahl und einem optionalen Zeitraumindikator ( t (Tage)(default), m(Monate), j(Jahre) )

Angenommen, das aktuelle Datum ist: 15.05.2020

+4 → 19.05.2020

+4t → 19.05.2020

+3m → 15.08.2020

+5j → 15.05.2025

-4 → 11.05.2020

-4t → 11.05.2020

-3m → 15.02.2020

-5j → 15.05.2015

States

	Aktiv Ein aktiver Date Picker kann vom Nutzer fokussiert werden und die Eingabe des Datums kann per Tastatur im Feld, oder über das Overlay erfolgen. Letzteres öffnet sich durch einen Klick in das Feld oder auf das Icon.
	Fehlerhaft Date Picker können validiert werden. Je nach Ergebnis der Validierung wird der Date Picker hervorgehoben. Im Fehlerzustand erscheint die Fehlermeldung unterhalb vom Date 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 Pickers ein Hilfetext angezeigt werden. Dieser gibt dem Nutzer weitere Informationen über die benötigte Eingabe.

Die Darstellung der States Inaktiv , Read Only , Hover und Fokus entspricht der Standarddarstellung. Siehe States .

Barrierefreiheit

Tastaturbedienung

Über Tabulatortaste ("Tab") oder Hochstell- und Tabulatortaste ("Shift" + "Tab") ist der Date Picker fokussierbar. Nach dem Öffnen des Overlays mit der Leertaste, können einzelne Tage mit den Pfeiltasten angesteuert werden. Durch das Drücken der Pfeiltaste nach oben und der Pfeiltaste nach unten kann zwischen den Monaten und damit auch zwischen den Jahren gewechselt werden. Ist ein Tag im Fokus, nachdem er mit den Pfeiltasten angesteuert wurde, kann dieser mittels Eingabetaste ("Enter") und auch per Leerzeichentaste ("Space") ausgewählt werden. Der Date Picker schließt bei gleichzeitiger Auswahl des Tages und 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-date-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-picker

Code Examples

Install

Maven

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

Import

import com.vaadin.flow.component.datepicker.DatePicker;
import java.time.LocalDate;

Variants

Default

DatePicker datePicker = new DatePicker("Date");
datePicker.setValue(LocalDate.of(2024, 1, 1));
datePicker.setHelperText("Helper text");

Read Only

DatePicker datePicker = new DatePicker("Read only");
datePicker.setValue(LocalDate.of(2024, 1, 1));
datePicker.setReadOnly(true);

Disabled

DatePicker datePicker = new DatePicker("Disabled");
datePicker.setValue(LocalDate.of(2024, 1, 1));
datePicker.setEnabled(false);

Invalid

DatePicker datePicker = new DatePicker("Invalid");
datePicker.setValue(LocalDate.of(2024, 1, 1));
datePicker.setManualValidation(true);
datePicker.setInvalid(true);
datePicker.setErrorMessage("Error message");

Min / Max Date

Restrict the selectable date range.

DatePicker datePicker = new DatePicker("Date");
datePicker.setMin(LocalDate.now());
datePicker.setMax(LocalDate.now().plusMonths(3));