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