Date Range Picker
Select a continuous range of dates — built on top of DatePicker in range mode, with two-calendar display and optional preset shortcuts.
Installation
dotnet add package Lumeo
One-time app setup (AddLumeo(), CSS & JS) is covered in the
installation guide.
Usage
@using Lumeo <DateRangePicker />
When to Use
- Selecting date ranges for booking systems and reservation flows
- Report filters that require a start and end date
- Analytics dashboards with customizable time windows
- Invoice or billing period selection
Can only select dates within the next 30 days.
API Reference
DateRangePicker
| Property | Type | Default | Description |
|---|---|---|---|
| StartDate | DateOnly? | — | The range start date. Supports two-way binding. |
| EndDate | DateOnly? | — | The range end date. Supports two-way binding. |
| Presets | List<DateRangePreset>? | — | Shortcut presets (e.g., "Last 7 days", "This month"). |
| MinDate | DateOnly? | — | Earliest selectable date. |
| MaxDate | DateOnly? | — | Latest selectable date. |
| Placeholder | string | "Select date range" | Placeholder text when no range is selected. |
| Format | string | "MMM dd, yyyy" | Date display format string. |
| Clearable | bool | true | Show a clear button when a range is selected. |
| Disabled | bool | false | Disable the date range picker. |
DateRangePreset
| Property | Type | Description |
|---|---|---|
| Label | string | Display label for the preset shortcut. |
| Start | DateOnly | Start date of the preset range. |
| End | DateOnly | End date of the preset range. |
Related Components
- DatePicker — Single date selection when only one date is needed
- Calendar — Inline calendar display for date browsing and selection
- Form — Wrap date range pickers in validated form layouts