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

Date Picker

The Date Picker component allows users to select a date (and optionally time) value within forms. It offers various configuration options for formatting, display behavior, and validation. This component is particularly useful for capturing dates like birthdays, appointment scheduling, event planning, or any scenario requiring a date input with consistent formatting.

Properties

Visual Properties

• labelTranslations - Sets the label text displayed above the date picker with support for multiple languages. For example, {"en-US": "Appointment Date", "de-DE": "Terminsdatum"} ensures proper localization of the field label for different language settings.

• timeLabelTranslations - Sets the label text displayed for the time portion of the date picker with support for multiple languages. For example, {"en-US": "Appointment Time", "de-DE": "Terminzeit"} creates clear labeling for time selection when that option is enabled.

• format - Determines how the selected date (and time) will be displayed and parsed. Various formats are available, such as "DD/MM/YYYY" or "YYYY-MM-DD HH:mm". For example, setting to "DD.MM.YYYY" would display dates like "25.04.2025" regardless of the user's locale.

• showTime - Controls whether the time selection component is displayed alongside the date picker. When set to true, users can select both date and time values, which is useful for scheduling precise appointments or events.

• showNowButton - Adds a button that allows users to quickly select the current date and time. When enabled, this provides a convenient shortcut for users who need to input the current time without manually selecting values.

• initializeWithCurrentDate - Determines whether the date picker should pre-fill with the current date when first displayed. When set to true, the field will initialize with today's date rather than being empty, which is helpful for forms where today is the most common selection.

• type - Sets the visual appearance of the date picker between "NORMAL" (standard dropdown picker) and "INLINE" (always-visible calendar). For example, using "INLINE" mode displays a persistent calendar directly on the form rather than requiring a click to open it.

Validation Properties

• validation - Configures validation rules for the date picker, including:
  • required - When set to true, a date must be selected before the form can be submitted.
  • compareFields - Enables validation against other date fields, allowing for date range validations like ensuring an end date comes after a start date.

Non-Visual Properties

• dataField - Defines the field name that will be used when submitting form data. For example, setting to "appointmentDate" ensures the selected date is submitted with this field name in the data object.

• saveInLocalStorage - Determines whether the component's selected date is preserved in local storage between sessions. When enabled, the date selection persists between page reloads, improving user experience for complex forms that may take time to complete.

• controlsRequestType - Specifies how the date field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the date in the request body, which is standard for most form submissions.

• readonly - Controls whether the date picker can be interacted with by users. When set to true, the field displays its value but cannot be modified, which is useful for display-only scenarios or when dates are determined programmatically.

• hidden - Controls whether the component is visible in the form. When set to true, the component remains in the form structure but is not displayed, which is useful for conditional rendering based on other field values.

Event Actions

• events - Configures the events that the component can trigger and respond to:
  • ON_INIT: Triggered when the date picker component is initialized. Can be used to perform setup operations or initial state calculations.
  • ON_DESTROY: Triggered when the component is removed from the DOM. Useful for cleanup operations and releasing resources.

Testing Hooks

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