Version v3 Documentation
You are viewing documentation for an older version.
View latest (v4) documentation →
Date Range Picker
A date range selection interface with a dual-calendar view, quick-select presets, and day count constraints. Ideal for reporting dashboards, booking systems, and analytics date filters where users need to define a start and end date.
Default
The default
DateRangePicker shows a two-month calendar with preset quick-select options. Bind to a DateRange? value with @bind-Value for two-way data binding. Click a start date, then an end date, and press Apply to confirm the selection.
Loading example…
With Date Constraints
Use
MinDate and MaxDate to limit selection to a specific date window. Dates outside the range are automatically disabled. This example restricts selection to the past month, useful for historical report generation.
Loading example…
With Range Day Limits
Set
MinDays and MaxDays to enforce range duration constraints. This example requires a minimum of 3 days and a maximum of 14 days. Selections violating these constraints are automatically reset, prompting the user to start over.
Loading example…
Single Month View
Set
ShowTwoMonths to false to display only one month at a time. This compact layout is useful for mobile-friendly interfaces or when horizontal space is limited. Navigate between months using the arrow buttons.
Loading example…
Custom Presets
Use the
Presets parameter to supply a custom list of quick-pick entries. Mix built-in presets (via DateRangePreset enum values, which implicitly convert to DateRangeQuickPick) with fully custom entries created using DateRangeQuickPick.Custom(). Each custom entry takes a label and a factory function that returns a DateRange.
Loading example…
Without Presets
Set
ShowPresets to false to hide the quick-select sidebar and show only the calendar view. This gives users a cleaner interface when predefined ranges are not relevant to the use case.
Loading example…
Auto Apply
Set
AutoApply to true to commit the range as soon as both dates are picked — the popover closes without requiring the Apply button. This suits booking flows where selecting check-in and check-out should feel like a single gesture. To remove the Clear/Apply footer entirely, set ShowButtons to false, which implies auto-apply since there is no Apply button to confirm with.
Loading example…
Custom Variant
Use the
Class parameter to apply custom Tailwind CSS classes to the trigger button. This example uses a wider button with a border accent and custom background, demonstrating how to style the picker for different design contexts.
Loading example…
Disabled
Set
Disabled to true to prevent user interaction. The picker appears with reduced opacity and the popover does not open on click, suitable for read-only displays or when date selection is temporarily unavailable.
Loading example…
Analytics Dashboard
A real-world composition showing the
DateRangePicker in a dashboard header alongside a title. This pattern is common in analytics and reporting applications where the date range controls the data shown across multiple charts and tables.
Loading example…
Public Methods
Use a component reference (@ref) to access these methods programmatically.
| Method | Returns | Description |
|---|---|---|
| Clear() | Task | Clears the selected range: resets the in-progress selection, sets Value to null, and raises ValueChanged. |