# Date Range Picker

Source: https://lumeo.nativ.sh/components/date-range-picker

# 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

.NET CLI PackageReference Lumeo CLI

dotnet add package Lumeo

One-time app setup (`AddLumeo()`, CSS & JS) is covered in the [installation guide](docs/introduction).

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

Preview Code

Basic Date Range Picker

Pick a date range

Preview Code

With Preset Shortcuts

Pick a date range

Preview Code

Min / Max Constraints

Pick a date range

Can only select dates within the next 30 days.

Preview Code

Custom Format

DD/MM/YYYY — DD/MM/YYYY

Preview Code

Disabled

Pick a date range

## 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](/components/date-picker) — Single date selection when only one date is needed
-   [Calendar](/components/calendar) — Inline calendar display for date browsing and selection
-   [Form](/components/form) — Wrap date range pickers in validated form layouts