Blazor DateRangePicker
The Radzen Blazor DateRangePicker lets users select a start and end date from a popup showing two months side by side with an in-range highlight and hover preview of the prospective range.
Get and Set the value of DateRangePicker linkLink to this section
The DateRangePicker binds to a DateRange value with nullable Start and End dates. Use @bind-Value to get the user input.
The first click in the calendar selects the start date and the second click selects the end date. Clicking a date before the pending start date restarts the selection from that date.
The popup shows two months side by side by default - use DisplayMonths to change the number of displayed months.
Thursday, 01 October 2026 - Thursday, 08 October 2026
Set Min and Max dates linkLink to this section
Use the Min and Max properties to restrict the dates available for selection. Use the DateRender callback to disable specific dates.
DateRangePicker navigation mode linkLink to this section
The DateRangePicker uses drill-down navigation by default - clicking a calendar title drills up to a month grid and a year grid for fast navigation to distant dates.
Set NavigationMode="DatePickerNavigationMode.DropDown" to disable the clickable titles and navigate with the previous/next buttons only.
DateRangePicker as calendar linkLink to this section
Use Inline="true" to display the DateRangePicker as an always-visible calendar without an input field.
| 1 | 2 | 3 | 4 | 5 | ||
| 6 | 7 | 8 | 9 | 10 | 11 | 12 |
| 13 | 14 | 15 | 16 | 17 | 18 | 19 |
| 20 | 21 | 22 | 23 | 24 | 25 | 26 |
| 27 | 28 | 29 | 30 | |||
| 1 | 2 | 3 | ||||
| 4 | 5 | 6 | 7 | 8 | 9 | 10 |
| 11 | 12 | 13 | 14 | 15 | 16 | 17 |
| 18 | 19 | 20 | 21 | 22 | 23 | 24 |
| 25 | 26 | 27 | 28 | 29 | 30 | 31 |
Monday, 28 September 2026 - Sunday, 04 October 2026
Keyboard Navigation linkLink to this section
The following keys or key combinations provide a way for users to navigate and interact with Radzen Blazor DateRangePicker component.
| Press this key | To do this |
|---|---|
| Tab | Navigate to a DateRangePicker component. |
| Alt + DownArrow | Open the calendar popup. |
| RightArrow on open popup | Move focus to the next day. |
| LeftArrow on open popup | Move focus to the previous day. |
| UpArrow on open popup | Move focus to the same day of the previous week. |
| DownArrow on open popup | Move focus to the same day of the next week. |
| Home on open popup | Move focus to the first day of the week. |
| End on open popup | Move focus to the last day of the week. |
| PageUp on open popup | Move focus to the same day of the previous month. |
| PageDown on open popup | Move focus to the same day of the next month. |
| Shift + PageUp on open popup | Move focus to the same day of the previous year. |
| Shift + PageDown on open popup | Move focus to the same day of the next year. |
| Enter or Space in an opened popup | Select the focused day as start or end of the range. The popup closes when the range is complete. |
| Enter or Space on the calendar title | Drill up to month selection, then to year selection. |
| Arrow keys in month or year selection | Move focus between months or years. |
| PageUp or PageDown in month selection | Move focus to the same month of the previous or next year. |
| PageUp or PageDown in year selection | Move focus to the previous or next page of years. |
| Enter or Space on a month or year | Select it and drill back down. |
| Esc in an opened popup | Close the popup. |
Frequently asked questions
How do I get the selected date range?
Bind Value to a DateRange instance. The DateRangePicker sets its Start and End dates as the user selects them and raises Change when the selection changes.
How does range selection work in the calendar?
The first click selects the start date and the second click selects the end date and closes the popup. Clicking a date before the pending start date restarts the selection from that date.
Can I use the DateRangePicker as an always-visible calendar?
Yes. Set Inline to true to render the calendar inline instead of a popup.
How do I restrict the selectable dates?
Use Min and Max to bound the selectable range and the DateRender callback to disable specific dates.
Radzen Blazor Components, © 2018-2026 Radzen.
Source Code licensed under
MIT