Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Date Range Picker
Link to Figma: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11525-89949&t=iosNC2AkSTGs5lMh-1
Overview
- The Date Range Picker allows users to select a start and end date within forms.
- It supports formatting, display options, and validation rules.
- It is useful for scenarios such as reporting periods, booking ranges, or filtering data by timeframes.
- The component can also handle time selection when precision is required.
Specs
Tokens
| Token | Description |
|---|---|
| labelTranslations | Sets the label text displayed above the picker with support for multiple languages. |
| format | Determines how selected dates are displayed and parsed (e.g., "DD/MM/YYYY"). |
| minZoomMode | Sets the minimum zoom level in the calendar (DAY, MONTH, YEAR). |
| maxZoomMode | Sets the maximum zoom level in the calendar (DAY, MONTH, YEAR). |
| showTime | Controls whether time selection is available. |
| showNowButton | Adds a button to quickly select the current date and time. |
| initializeWithCurrentDate | Pre-fills the picker with today as start and tomorrow as end when first displayed. |
| type | Sets the appearance to "NORMAL" (dropdown) or "INLINE" (always visible calendar). |
| hidden | Controls whether the component is visible in the form. |
| saveInLocalStorage | Preserves the selected range in local storage between sessions. |
| defaultValue | Sets the initial date range used when the form is reset. |
| readonly | Displays the value but prevents user changes. |
| dataField | Defines the field name used when submitting form data. |
| controlsRequestType | Specifies how the date range data is sent in HTTP requests (BODY, HEADER, PATH). |
| validation | Configures validation rules for the date range. |
| required | Ensures a date range must be selected before submission. |
| authorizationDisable | Applies a policy set that disables the component based on user permissions. |
| events | Configures events the component can trigger or respond to. |
| ON_VALUE_CHANGE (Events) | Triggered when the user changes the date range. |
| ON_INIT_BASED_ON_USER_VIEW (Events) | Triggered when the component initializes in user view mode. |
| ON_INIT (Events) | Triggered when the component is initialized. |
| ON_DESTROY (Events) | Triggered when the component is removed from the DOM. |
...
- validation – Configures validation rules for the date range picker, including:
- required – When set to true, a date range must be selected before the form can be submitted. This ensures users provide this important information before proceeding.
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-range-picker
Guidelines
Usage
- Use for selecting a start and end date (optionally with time) when forms must submit a single range value. Bind the submitted field and transport to backends using
dataFieldandcontrolsRequestType. - Enable time precision only when required. Turn on
showTimeso users can pick hours/minutes alongside dates. - Prefer a predictable, explicit display/parse format. Set
format(e.g.,DD.MM.YYYYorYYYY-MM-DD HH:mm) so values read consistently and parse reliably. - Pre-fill when “current period” is the dominant choice. Use
initializeWithCurrentDate(today → tomorrow) or set an explicitdefaultValuefor common ranges.
...
