Page History

Versions Compared

...

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.

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).

Choose a format that yields predictable character length (e.g., YYYY-MM-DD vs DD.MM.YYYY) to avoid truncation in tight layouts.

Switch between interactive and non-editable states using readonly.
Control presence vs absence using hidden (keeps the field in the form model but not visible).
Guard data quality through validation rules, including required and compareFields, to surface errors at validation time.

Show a system-controlled value without allowing edits by setting readonly: true.
Hide the control from the UI while retaining it in the submission model with hidden: true.

Localize all human-facing text via labelTranslations and, when showTime: true, timeLabelTranslations.
Choose an unambiguous format that users recognize; if ambiguity is a concern, prefer ISO-like YYYY-MM-DD (or add time via YYYY-MM-DD HH:mm).
Keep labels short and specific to reduce wrapping; avoid color-only meaning—use explicit labels and validation feedback.

Do	Don’t	Article setting(s)
Enable `showTime` and provide `timeLabelTranslations` with a time-inclusive `format` when a time is required.	Ask for a time in instructions while leaving the time selector off.	`showTime`, `timeLabelTranslations`, `format`
Prefill today when it’s the common case with `initializeWithCurrentDate`; add `showNowButton` for quick “current” input.	Force users to navigate the calendar for “today” repeatedly.	`initializeWithCurrentDate`, `showNowButton`
Choose a single, unambiguous `format` and keep it consistent between parsing and display.	Mix display and parsing formats or use locale-ambiguous patterns.	`format`
Enforce relationships like end ≥ start using `compareFields`.	Rely on manual checking or external validation only.	`validation.compareFields`
Mark mandatory fields with `required` inside the component’s `validation`.	Depend solely on page-level validation to catch empty dates.	`validation.required`
Persist selections for long forms with `saveInLocalStorage`.	Make users re-enter dates after a reload.	`saveInLocalStorage`
Show non-editable, system-generated dates with `readonly`.	Hide the value entirely when users need to see it.	`readonly`
Hide the control from the UI with `hidden` when it shouldn’t be visible.	Leave an irrelevant picker visible and hope users ignore it.	`hidden`

...