Darstellung und Verhalten

Varianten

Datum

Die Datumsauswahl dient zur Eingabe eines Datums.

Im Dropdown-Menü zur Datumsauswahl wird ein Datumsauswahlelement eingeblendet. Mobile kann die native Funktion des Betriebssystems angesteuert werden.

• Wird nach einem Datum gefragt, so wird ein Eingabefeld mit Kalender-Icon angezeigt.
• Ein Klick auf das Feld führt zu folgendem Verhalten:
  • Das Label des Feldes verschiebt sich nach oben.
  • Das Format des Datums erscheint als Hilfetext.
  • Ein Kalender-Dropdown wird angezeigt.
• Darstellung im Kalender Dropdown:
  • Der aktuelle Monat wird angezeigt.
  • Der aktuelle Tag ist hellgrau umrandet.
  • Mit einem Klick können Nutzende einen Tag wählen.
• Ein Klick auf einen Tag führt zu folgendem Verhalten:
  • Der gewählte Tag wird blau gekennzeichnet.
  • Das Dropdown schliesst automatisch.
  • Der gewählt Tag wird in das Feld geschrieben.

Zeitraum

• Wird nach einem Zeitraum gefragt, so wird ein Eingabefeld mit Kalender-Icon angezeigt.
• Ein Klick auf das Feld führt zu folgendem Verhalten:
  • Das Label des Feldes verschiebt sich nach oben.
  • Das Format des Datums erscheint als Hilfetext.
  • Ein Kalender-Dropdown wird angezeigt.
• Darstellung im Kalender Dropdown:
  • Der aktuelle Monat wird angezeigt.
  • Der aktuelle Tag ist hellgrau umrandet.
• Auswahl des Zeitraums:
  • Bei Klick auf einen Tag wird dieser blau gekennzeichnet.
  • Bei Klick auf einen zweiten Tag wird dieser und die dazwischen liegenden Tage hellgrau gekennzeichnet.
  • Das Dropdown schliesst automatisch.
  • Der gewählte Zeitraum wird in das Feld geschrieben.
  • Bei erneutem Klick auf das Feld ist der Zeitraum visuell hervorgehoben. Der erste Tag des Zeitraums ist blau markiert.

Uhrzeit

Das Element für die Auswahl einer Uhrzeit dient zur Eingabe einer Uhrzeit.

Standardmässig ist die aktuelle Uhrzeit vorausgefüllt, ausser es ergibt im Kontext des Einsatzes keinen Sinn.

Die Zeiteingabe funktioniert ohne Eingabe des Doppelpunktes. Eingaben wie 130, 1.30 oder 1,30 werden nach Verlassen des Feldes korrekt in 01:30 umformatiert. Bei Touch-Geräten erscheint die Zahlen-Eingabetastatur des entsprechenden Systems.

• Das Element besteht aus einem Eingabefeld mit Label und Uhr-Icon.
• Ein Klick auf das Feld führt zu folgendem Verhalten:
  • Das Label des Feldes verschiebt sich nach oben.
  • In das Feld wird eine Uhrzeit geschrieben
  • Unter dem Feld erscheinen zwei Auswahlfeldern für die Stunden und Minuten. Die Auswahlfelder haben Pfeile, um die Zahl zu vergrössern oder zu verkleinern.
• Auswahl der Uhrzeit:
  • Benutzende können direkt in das Eingabefeld schreiben.
  • Benutzende können über die Pfeile die gewünschte Zeit auswählen.
  • Benutzende können in die Auswahlfelder klicken und die Zeit überschreiben.

Jahr (von/bis)

• Das Element besteht aus einem Eingabefeld mit Label und Kalender-Icon. 
• Ein Klick auf das Feld führt zu folgendem Verhalten:
  • Das Label des Feldes verschiebt sich nach oben.
  • In das Feld wird ein Platzhalter geschrieben.
  • unter dem Feld erscheinen zwei Auswahlfeldern für das erste Jahr (von) und das zweite Jahr (bis). Die Auswahlfelder haben Pfeile, um die Zahl zu vergrössern oder zu verkleinern.
• Auswahl der Uhrzeit:
  • Benutzende können direkt in das Eingabefeld schreiben.
  • Benutzende können über die Pfeile die gewünschte Jahre auswählen.
  • Benutzende können in die Auswahlfelder klicken und die Jahre überschreiben.

Verwendung

Datum und Zeitraum

Wir können Datum und Zeitraum entweder als normales Eingabefeld ohne Kalender oder mit Kalender nutzen.

Ein Kalender macht Sinn, wenn es sich um eine Datumsauswahl innerhalb des aktuellen Monats oder innerhalb der vorherigen bzw. nachfolgenden drei Monate handelt. Liegt das zu wählende Datum länger als ein Jahr in der Vergangenheit oder in der Zukunft, so nutzen wir ein Eingabefeld ohne Kalender. Dies gilt zum Beispiel für die Wahl eines Geburtsdatums. Hier müssten Nutzende zu lange klicken, um das richtige Datum zu finden.

Uhrzeit

Die Wahl einer Uhrzeit eignet sich zum Beispiel bei einer Terminwahl. Wir können Nutzenden so verfügbare Zeiten anbieten.