The Date Range Picker Component allows users to select a date range (start and end dates) within forms. It provides various configuration options for formatting, display behavior, and validation. This component is particularly useful for reporting periods, booking date ranges, filtering data by timeframes, and any scenario requiring selection of a time period.
labelTranslations - Sets the label text displayed above the date range picker with support for multiple languages. For example, {"en-US": "Reporting Period", "de-DE": "Berichtszeitraum"} ensures proper localization of the field label for users in different regions.
format - Determines how the selected dates 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.
minZoomMode - Sets the minimum zoom level available in the calendar view. Options include "DAY", "MONTH", and "YEAR". For example, setting to "MONTH" restricts users from zooming in to view individual days, which is useful for selecting broader time ranges.
maxZoomMode - Sets the maximum zoom level available in the calendar view. Options include "DAY", "MONTH", and "YEAR". For example, setting to "YEAR" prevents users from viewing monthly calendars, which is useful when precise day selection isn't required.
showTime - Controls whether the time selection components are displayed alongside the date pickers. When set to true, users can select both dates and times for more precise range selection, which is useful for scheduling or reporting that requires time precision.
showNowButton - Adds buttons that allow users to quickly select the current date and time. When enabled, this provides a convenient shortcut for users who need to input the current date without manually navigating the calendar.
initializeWithCurrentDate - Determines whether the date range picker should pre-fill with the current date when first displayed. When set to true, the field will initialize with today as the start date and tomorrow as the end date, which is helpful for forms where the current period is the most common selection.
type - Sets the visual appearance of the date range 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.
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.
saveInLocalStorage - Determines whether the component's selected date range is preserved in local storage between sessions. When enabled, the range selection persists between page reloads, improving user experience for complex forms that may take time to complete.
defaultValue - Sets the initial date range that will be used when the form is reset. For example, setting this to a specific date range ensures consistent starting values for the form.
readonly - Controls whether the date range 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 date ranges are determined programmatically.
dataField - Defines the field name that will be used when submitting form data. For example, setting to "reportingPeriod" ensures the selected date range is submitted with this field name in the data object.
controlsRequestType - Specifies how the date range field data is sent in HTTP requests: 'BODY', 'HEADER', or 'PATH'. For example, setting to "BODY" includes the date range in the request body, which is standard for most form submissions.