# Date Range Picker Let users select a start and end date with a visual calendar. Includes preset quick-select buttons (Today, This Week, Last 7 Days), optional time selection, and configurable constraints. Perfect for booking filters, report date ranges, and scheduling interfaces. ## Getting Started Add the Date Range Picker to your screen. Users will see a calendar where they tap once for the start date and again for the end date. The selected range highlights in color between the two dates. Wire the **On Range Selected** action to capture the chosen dates. ## Settings ### General Configuration * **Display Mode** -- Choose **Single Month** for a compact view, or **Dual Month** to show two months side by side for easier range selection across month boundaries. * **Language** -- Display in any of 12 languages: Arabic, Chinese, English, French, German, Hindi, Japanese, Polish, Portuguese, Spanish, Russian, or Swedish. * **First Day of the Week** -- Start weeks on **Sunday** or **Monday**. * **Include Time Selection** -- Toggle on to add time pickers alongside the date selection. Great for booking systems that need specific times. * **Time Format** -- When time selection is on, choose **12 Hour** (AM/PM) or **24 Hour** format. * **Time Interval** -- When time selection is on, set the increment between selectable times: every 15, 30, or 60 minutes. * **Start Date Label** -- Customize the label for the start date field. Defaults to "Start Date." * **End Date Label** -- Customize the label for the end date field. Defaults to "End Date." * **Placeholder Text** -- The text shown before any dates are selected. Defaults to "Select dates." * **Clear Button** -- Toggle on to show a button that lets users clear their selection and start over. ### Presets * **Show Preset Ranges** -- Toggle on to display quick-select buttons above or below the calendar. * **Preset: Today** -- Include a "Today" quick-select button. * **Preset: This Week** -- Include a "This Week" button. * **Preset: Last 7 Days** -- Include a "Last 7 Days" button. * **Preset: This Month** -- Include a "This Month" button. * **Preset: Last 30 Days** -- Include a "Last 30 Days" button. * **Preset: Custom** -- Include a "Custom" option that opens the full calendar for manual selection. ### Appearance * **Background Color** -- The picker's overall background. * **Text Color / Heading Text Color / Day of Week Color** -- Control text colors throughout the calendar. * **Disabled Date Color** -- Color for dates that cannot be selected. * **Range Start Color / Range End Color** -- The highlight color for the first and last dates of the selected range. Both use your primary color by default. * **Range Between Color** -- The lighter color that fills the dates between the start and end. * **Range Text Color** -- Text color on selected dates. * **Today Indicator Color** -- Highlights today's date on the calendar. * **Preset Button Color / Preset Button Text Color** -- Styling for the quick-select preset buttons. * **Navigation Icon Color** -- Color of the month navigation arrows. * **Border Radius** -- Rounds the corners of the overall picker container. * **Cell Border Radius** -- Rounds individual day cells. Set to 20+ for circular cells. ### Constraints * **Earliest Selectable Date** -- Block selection before this date. Enter in YYYY-MM-DD format or use Magic Text. * **Latest Selectable Date** -- Block selection after this date. * **Minimum Range Days** -- The shortest allowed range. Set to 1 for single-day selections, or higher to enforce minimums (e.g., 3-night minimum for hotel bookings). * **Maximum Range Days** -- The longest allowed range. Defaults to 365 days. * **Disabled Dates Collection / Disabled Date Field** -- Optionally connect a collection of specific dates that should be grayed out and unselectable (holidays, blackout dates, etc.). ## Actions * **On Range Selected** -- Fires when both start and end dates are chosen. Returns the **Start Date** and **End Date** as text strings. * **On Range Cleared** -- Fires when the user clears their selection using the clear button. * **On Start Date Selected** -- Fires as soon as the user picks the first date, before they have chosen the end date. Returns the **Start Date**. ## Tips & Best Practices * Use **Dual Month** mode for desktop-oriented apps and **Single Month** for mobile-first apps where screen space is limited. * Enable only the presets that make sense for your use case -- a hotel booking app might use "This Weekend" and "Next Week," while a reporting tool might use "Last 7 Days" and "Last 30 Days." * Set **Minimum Range Days** to enforce your business rules (e.g., 2-night minimum for vacation rentals). * Use **Disabled Dates Collection** to block holidays, sold-out dates, or maintenance windows. * Wire **On Start Date Selected** to update a preview or show pricing even before the full range is complete. ## Example Use Cases * **Hotel Booking Filter:** Users select check-in and check-out dates with a 1-night minimum. Blocked dates from your availability collection are grayed out. * **Report Date Range:** Add preset buttons for "Last 7 Days," "Last 30 Days," and "This Month" for quick filtering of analytics data. * **Event Scheduling:** Include time selection for booking conference rooms with 30-minute time intervals. --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://help.adalo.com/component-basics/marketplace-components/date-range-picker.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.