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

Date Picker

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.

Specs

Tokens

Structure

• Consists of a calendar interface for selecting a date, with an optional time selector for choosing hours and minutes.
• Can be shown as a dropdown picker that opens on click or as an inline calendar always visible on the form.
• May include quick-action buttons such as “Now” to select the current date and time.

(Configured in 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.

Styling

(Configured in 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.
• 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.
• 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.
• 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.

Actions & Variants

(Configured in Non-Visual Properties)

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

(Configured in Events)

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

Validation

(Configured in Validation)

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

Tests

(Configured in 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.

Guidelines

• Date pickers restrict user input and only allow valid entries.
• They rely equally on keyboard and mouse interactions.
• Because they restrict input to valid values, additional field validation is not required.

Accessibility

[NO DATA AVAILABLE]