Blazor DateRangePicker Example - Preset Ranges

This sample demonstrates the preset ranges functionality of the DateRangePicker component. Click the DateRangePicker popup icon to open a list of custom preset ranges. The "Custom range" entry at the end of the list opens the date-range picker calendar so users may select arbitrary start and end dates.

Presets provide one-click access to commonly used intervals (for example, Today, Last 7 days, This month). When a preset is selected, the component updates its value to the corresponding start and end dates and closes the popup to confirm the selection.

The DateRangePicker exposes a presets collection that you can configure with labels and date calculations; include a "Custom range" item to preserve the standard calendar-based selection workflow. Presets are rendered inside the popup and support keyboard and mouse interaction consistent with the component’s native behavior.

Implementation notes: bind the component value to your view model to capture selections and ensure preset calculations respect the current culture and timezone. When defining preset labels, prefer concise, accessible text and include aria-label attributes where appropriate so assistive technologies convey intent clearly.

Accessibility and UX: ensure the popup is reachable by keyboard, that the active preset receives focus, and that the "Custom range" option announces it opens the calendar. Confirm assistive technologies receive updated value notifications after selection so screen readers reflect the new range.

When integrating presets in applications, provide a representative default set and document their semantic meaning (for example, whether ranges are inclusive or exclusive). Test across locales, verify timezone handling for ranges spanning daylight‑saving transitions, and ensure programmatic value updates raise change events consumed by the host application.