Our Blazor Date Range Picker component allows you to select a date range using a single calendar dropdown.

The DevExpress Blazor Date Range Picker component supports multiple size modes. To specify component size in code, use the SizeMode property. To apply different size modes within this demo, use the drop-down list in the demo card's header.

The Date Range Picker supports keyboard navigation (list of supported keyboard shortcuts), allowing users to navigate within the calendar dropdown and select a date range.

Use any of the following to clear the Blazor Date Range Picker:

• Delete the start and end dates within the editor's input field.
• Click the Clear button. To display this button within your DevExpress-powered Blazor app, set the ClearButtonDisplayMode property to Auto.

Use the NullText property to display placeholder text in the Date Range Picker when dates have yet to be selected.

The DevExpress Blazor Date Range Picker supports standard date formats. See the Standard Date and Time Format Strings and Custom Date and Time Format Strings help topics for additional information. Use the DisplayFormat property to format the editor's display values.

Use the MinDate and MaxDate properties to specify a range of available dates. The Blazor Date Range Picker's calendar disables dates that are out of range and hides navigation arrows as needed.

You can use the DayCellTemplate property to highlight individual dates in the Date Range Picker's calendar. The template's context parameter allows you to access the current date-time object and associated settings.

The code used above applies different styles to different groups of dates.