UI-Justiz

Eingabefeld, Datum

Die Datumseingabe ist ein einzeiliges Eingabefeld zur Erfassung von Daten in unterschiedlichen Formaten.

Hinweis: Folgende Designerweiterungen sind für 1.1 nicht für Entwicklung und Testing vorgesehen:

#2162; #1304; #1789

Aufbau

  1. Container mit Eingabefeld
  2. Text Label
  3. Manuelles Eingabefeld
  4. Datepicker
  5. Hinweistext

    Verhalten

    Manuelle Eingabe

    Erlaubt ist die Eingabe von Zahlen und dem Sonderzeichen “Punkt”. Die maximal erlaubte Zeichenzahl sind 10 Zeichen. 

    Bei Erreichen des Maximalwerts wird keine weitere Eingabe zugelassen. Bei jedem weiteren Tastenanschlag (keydown) ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

    Es sind folgende Datums-Eingabeformate erlaubt:

    • TT.MM.JJJJ
    • T.MM.JJJJ
    • TT.M.JJJJ
    • T.M.JJJJ
    • TTMMJJJJ

    Erst beim Verlassen des Feldes wird das Datum (falls abweichend) in folgendes Format geändert: TT.MM.JJJJ.

    Darüber werden Nutzende über die kontextsensitive Hilfe informiert. Ebenso informiert die kontextsensitive Hilfe darüber, dass der Datepicker mit dem Tastaturkürzel “Alt+Pfeil nach unten” geöffnet werden kann. (Das Thema Kontextsensitive Hilfe noch allgemein zu bearbeiten).

    Es können außerdem folgende Formeln eingegeben werden (Groß- und Kleinbuchstaben zulässig):

    • [x]t bzw [x]T => heute + [x] Tage
    • [x]w bzw [x]W => heute + [x] Wochen
    • [x]m bzw [x]M => heute + [x] Monate
    • [x]j bzw [x]J => heute + [x] Jahre
    • h bzw H => heute
    • g bzw. G => gestern
    • m bzw. M => morgen

    Diese Formeln werden spätestens beim Verlassen des Feldes in das Format “TT.MM.YYYY” umgewandelt. Vorab umgewandlt wird die Formel, wenn Nutzende nach Eingabe der Formel die Enter-Taste drücken. Anschließend ist der gesamte Inhalt des Eingabefeldes markiert.

    An Datumsfeldern steht immer der Hinweistext “TT.MM.JJJJ”, welcher als Formatvorlage dient. Bei Bedarf können zusätzliche fachliche Hinweistexte ergänzt werden. Diese werden mit einem Gedankenstrich getrennt vor dem Formathinweis angezeigt: “[Fachlicher Hinweis] – TT.MM.JJJJ”.

    Fehlerfälle / Validierung

    Bei fehlerhaften oder fehlenden Eingaben (Ablauf siehe Formulare: Ablauf Front-/Backend-Validierung) erscheint ein Ausrufezeichen-Icon mit erklärendem Text, dieses muss als Layoutgrafik deklariert werden. Gleichzeitig ertönt ein akustisches Signal: Fehlermeldung (siehe akustische Signale).

    Standardfehlermeldungen lauten:

    • Bei ungültigem Datumsformat: “Falsches Eingabeformat”
    • “Datum darf nicht in der Zukunft liegen”
    • “Datum darf nicht in der Vergangenheit liegen”
    • “Kein gültiges Datum” (Beispiel: “65.50.2012”)

    Details zur Anwendung der Standardfehlermeldungen sind im Meldungskonzept beschrieben (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Valididierungsfehler zu beachten (siehe Meldungskonzept: Formulierungsregeln für Formular-Validierungsfehler).

    Eingabe mit Date-Picker

    Spezifikation und Design ausstehend. 
    Solange der Datepicker mit Overlay zur Datumsauswahl noch nicht umgesetzt ist, wird das Kalender-Icon, um diesen zu Öffen nicht angezeigt.
    Der Alternativtext für den Button zum Öffnen des Datepickers lautet “Datepicker öffnen”.

    Jahreseingabe / Jahresauswahl

    Zur Eingabe eines Jahres wird kein Datepicker-Element verwendet, sondern es können, je nach fachlicher Anforderung, folgende Elemente zum Einsatz kommen:

    Fall 1: Einzeiliges Eingabefeld (mit Auto-Suggest)

    Die Eingabe einer komplett beliebig wählbaren Jahreszahl soll möglich sein (Beispiel: Geburtsjahr). Hier sollte eines der folgenden Elemente verwendet werden: 

    • “Einzeiliges Eingabefeld”
    • “Einzeiliges Eingabefeld mit automatischen Vorschlägen (Auto-suggestion)

    Fall 2: Einfach-/Mehrfachauswahlfeld

    Es soll aus einer eingeschränkten Menge an Jahreszahlen eine/mehrere ausgewählt werden (Beispiel: Es liegen nur Datensätze aus den letzten 5 Jahren vor. Nutzende können einen Filter setzten, um nur Daten aus einem/mehreren dieser Jahre zu sehen.) In diesem Fall sollte eines dieser Elemente verwendet werden:

    • “Einfachauswahlfeld (Single Select Picker)”
    • “Mehrfachauswahlfeld (Multi Select Picker)”

    In beiden Fällen gilt zusätzlich zur Definition des entsprechenden oben genannten Elementes: 
    Erlaubt ist nur die Eingabe von Zahlen. Die maximal erlaubte Zeichenzahl sind 4 Zeichen. 

    Es ist nur das Eingabeformat JJJJ erlaubt. Dementsprechend findet nach Verlassen des Feldes auch keinerlei Umformatierung statt (im Gegensatz zum Datumseingabefeld). Es ist keine Formeleingabe zugelassen.

    An Jahreseingabefeldern steht immer der Hinweistext “JJJJ”, welcher als Formatvorlage dient. Bei Bedarf können zusätzliche fachliche Hinweistexte ergänzt werden. Diese werden mit einem Gedankenstrich getrennt vor dem Formathinweis angezeigt: “[Fachlicher Hinweis] – JJJJ”. Für die Standardfehlermeldung für falsch eingegebene Jahreszahlen (wenn Feldtyp Eingabefeld) lautet “Falsches Eingabeformat” (siehe Meldungskonzept: Standard-Meldungen für Formular-Validierungsfehler). Bei anderen Fehlermeldungen sind die Formulierungsregeln für Formular-Validierungsfehler zu beachten (siehe Formulierungsregeln für Formular-Validierungsfehler).

    Zustände

    Barrierefreiheit

    Bei Erscheinen des Ausrufezeichen-Icon, muss dieses als Layoutgrafik deklariert werden.

    Bedienung

    Tastaturbedienung

    • Mit der Tab-Taste wird das Datumseingabefeld fokussiert.
    • ALT+Pfeil unten und Pfeil unten öffnen den Datepicker mit den Auswahloptionen.
    • Nach Öffnen des Datepicker ist das erste interaktive Element darin fokussiert.
    • Detailspezifikationen innerhalb werden ergänzt, sobald Design vorliegt.
    • Enter wählt die selektierte Auswahl aus und schließt das Datepicker-Dropdown. Der Fokus liegt anschließend wieder auf dem Datumseingabefeld.
    • Mit der Esc-Taste kann das Datepicker-Dropdown wieder geschlossen werden, ohne, dass die Auswahl übernommen wird. Das Datumseingabefeld ist wieder fokussiert.
    • Wurde eine Formel (siehe oben) eingegeben und anschließend die Enter-Taste gedrückt, so wird diese in das Format “TT.MM.YYYY” umformatiert. Anschließend ist der gesamte Inhalt des Eingabefeldes markiert.
    • Durch erneutes Drücken der Tab-Taste, wird das nächste Interaktionselement fokussiert, und das aktuelle springt zurück zum Default-Zustand (leer oder gefüllt, je nach Eingabe).
    • Beim Verlassen des Feldes wird (falls Abweichend) die Umformatierung des Datums zu “TT.MM.YYYY” vorgenommen.

    Jahreseingabe bzw. -auswahl

    • Siehe zutreffendes oben genanntes Element

    Mausbedienung

    • Das Datumsauswahlfeld wird durch Klick mit linker Maustaste fokussiert.
    • Klick mit linker Maustaste auf das Kalender-Icon öffnet das Datepicker-Dropdown.
    • Detailspezifikationen innerhalb werden ergänzt, sobald Design vorliegt.
    • Nachdem ein Wert im Datepicker ausgewählt und bestätigt wurde, schließt sich das Dropdown und das Datumseingabefeld ist wieder im Fokus.
    • Mit einem Klick außerhalb des Datepickers oder auf das Kalendersymbol am Feld kann dieses geschlossen werden, ohne dass eine Auswahl getätigt wird. Das Datumsauswahlfeld ist wieder fokussiert.

    Jahreseingabe bzw. -auswahl

    • Siehe zutreffendes oben genanntes Element

    Weitere Themen: