Date Range Picker
Select a date range with two side-by-side calendars and optional quick presets.
Default
Two calendars side-by-side without presets.
From: None
To: None
With Presets
Quick selection with common date ranges.
From: None
To: None
With Date Constraints
Limit selectable dates to a specific range.
From: None
To: None
Custom Labels
Customize the calendar labels.
Check-in: None
Check-out: None
Disable Weekends
Disable specific dates with a custom function.
From: None
To: None
With Dropdown Navigation
Use dropdown selects for quick month/year navigation.
From: None
To: None
In a Form
DateRangePicker integrated with form fields.
No dates selected
API Reference
Component parameters and their types.
| Prop | Type | Default | Description |
|---|---|---|---|
| StartDate | DateOnly? | — | The selected start date. |
| EndDate | DateOnly? | — | The selected end date. |
| MinDate | DateOnly? | — | The minimum selectable date. |
| MaxDate | DateOnly? | — | The maximum selectable date. |
| ShowPresets | bool | false | When true, displays quick preset date range buttons. |
| StartDateLabel | string? | — | Label text for the start date calendar. |
| EndDateLabel | string? | — | Label text for the end date calendar. |
| IsDateDisabled | Func<DateOnly, bool>? | — | A function that returns true for dates that should be disabled. |
| CaptionLayout | CalendarCaptionLayout | Buttons | Controls the month/year navigation style. Options: Buttons, Dropdown. |