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