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.