Verwendung
Datepicker dienen der unmittelbaren Eingabe von Datumsangaben oder der mittelbaren Auswahl aus einer kalendarischen Ansicht. Als sekundäres Komfortmerkmal kann zusätzlich ein optionales Datepicker-Widget eingebunden werden, allerdings immer nur als Fallback zu den ebenfalls angebotenen Eingabefeldern.
Das Zoll-Portal verwendet hierfür eine eigene Komponente, die lediglich gestalterisch (Schriftart und -grad, Farben) an das Erscheinungsbild des Portals angepasst wurde. Anderen ist es freigestellt, ihre eigenen Datepicker-Widgets zu verwenden, sofern diese eine barrierefrei nutzbare Alternative beinhalten und die Design-Vorgaben befolgen.
Auf das native HTML-Element input type="date" wird aufgrund der mangelhaften Barrierefreiheit verzichtet. Für die primäre Datumseingaben benutzen Sie bitte input type="text", idealerweise kombiniert mit einem geeigneten Regulären Ausdruck in der Formular-Validierung.
Aufbau
Die Felder zur Datumseingabe bestehen immer aus den Texteingabefeldern und deren Textlabels sowie optional einem Icon-Button zum Öffnen einer Kalenderansicht. Die Auswahl eines Datums aus der Kalenderansicht schreibt den Wert zurück in das eigentliche Eingabefeld.
Eingaben, die einen bestimmten Datumsbereich erwarten, können auch als Paar implementiert werden, um z. B. einen Datumsbereich von – bis in einem Filter zu ermöglichen. Hierzu werden diese Felder nebeneinander abgebildet. Optionale Tooltips sind in diesem Fall nur einmal für die gesamte Gruppe vorgesehen.
Mögliche Eingaben
In Abhängigkeit der gewählten Sprache muss das Datum im landestypischen Format eingegeben und angezeigt werden. Die erlaubten Notationen der Datumseingabe sind:
In der deutschen Sprachvariante
- Platzhaltertext
- TT.MM.JJJJ
- Eingabe
08.08.2008- Ausgabe
08.08.2008
In der englischen Sprachvariante
- Platzhaltertext
- DD.MM.YYYY
- Eingabe
08.08.2008- Ausgabe
08 Aug 2008- Ausgabe mit Uhrzeit
08 Aug 2008, 20:08
Vorbelegung
Bei Festlegung einer möglichen Vorbelegung muss darauf geachtet werden, dass dieser Wert dem wahrscheinlichsten Wert entspricht, je nach Prozessschritt also z. B. dem aktuellen Datum. Logisch unmögliche Daten dürfen nicht auswählbar sein, z. B. ein Geburtsdatum in der Zukunft.
Gruppierung und Beschriftung
Datumseingaben mit getrennten Felder für Tag, Monat und Jahr benötigen im Markup ein gruppierendes Element, um ihre Zusammengehörigkeit zu kommunizieren. Dies kann mit dem ARIA-Attribut role="group" am umgebenden Eltern-Element erreicht werden oder die Platzierung in einem Fieldset mit einer passend gewählten Legende. Datepicker-Widgets selbst erhalten ihre Beschriftung über den Icon-Button und dessen Alternativtext, mit dem sie geöffnet werden.
Tooltips
Datepicker können ein zugeordnetes Tooltip erhalten, das entweder Bestandteil der Feldbeschriftung ist, oder programmatisch verknüpft nach dem Formularelement steht.
Do’s and Dont’s
So:
- Das Widget hat eine sinnvolle Vorbelegung
- Hinweise zur erwarteten Notation
So nicht:
- Das Widget ist nur mit einer Maus bedienbar
- Aus fachlicher Sicht unmögliche Auswahlen