RadzenDateRangePicker Class

A date range picker component that provides a calendar popup for selecting a start and end date. RadzenDateRangePicker binds to a DateRange value with nullable Start and End dates. Displays a text input rendering both dates separated by Separator and a calendar icon button. Clicking opens a popup calendar. The popup shows two months side by side by default - use DisplayMonths to change the number of displayed months. The first click in the calendar selects the start date, 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. While picking the end date the days between the start date and the hovered day are highlighted as a preview of the prospective range. Supports min/max date constraints, disabled dates via DateRender, inline calendar mode, and culture-specific formatting.

Inheritance

Implements

Inherited Members

Syntax

public class RadzenDateRangePicker : RadzenDatePicker<DateRange>, IComponent, IHandleEvent, IHandleAfterRender, IRadzenFormComponent

Examples

Basic date range picker:

<RadzenDateRangePicker @bind-Value=@range />
@code {
    DateRange range = new DateRange(DateTime.Today, DateTime.Today.AddDays(7));
}

Date range picker with constraints and custom format:

<RadzenDateRangePicker @bind-Value=@range Min="@DateTime.Today" Max="@DateTime.Today.AddMonths(6)" DateFormat="dd/MM/yyyy" AllowClear="true" />

Constructors

public RadzenDateRangePicker()

Properties

public int DisplayMonths { get; set; }

public string Separator { get; set; }