(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)

Date Picker

Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11525-89949&t=iosNC2AkSTGs5lMh-1

Overview

• The Date Picker component lets users select a date and, if needed, a time.
• It provides configuration options for display format, labels, and behavior.
• The component supports validation rules to ensure correct input.

...

• dataTestId – Sets the testing hook ID for automated testing. For example, setting to "appointment-date-picker" allows test scripts to reliably locate this component during automated test runs.

Links

• Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11525-89949&t=iosNC2AkSTGs5lMh-1
• Live style guide: https://e1-dev.k8s.myapp.de/live-style-guide/id3/9-date-picker/date-picker

Guidelines

Usage

• Use the Date Picker to capture a single calendar date; enable the time selector only when needed by turning on showTime and supplying timeLabelTranslations with a time-inclusive format (e.g., YYYY-MM-DD HH:mm).
• Default to today when that’s the most common value by enabling initializeWithCurrentDate; pair with showNowButton if users often need the current timestamp.
• Choose the visual mode intentionally: set type="INLINE" when an always-visible calendar aids scanning/comparison; use type="NORMAL" when conserving space or the picker should open on interaction.
• Persist work-in-progress for long or multi-step flows with saveInLocalStorage: true so users don’t lose their selection after reloads.
• Ensure back-end integration is correct by naming the field via dataField and selecting how it’s sent using controlsRequestType (BODY, HEADER, or PATH).

...