A component that lets you pick a start and end date with a linked calendar and two inputs. Supports min/max, disabled dates, week numbers, adaptive rendering (popup/action sheet), views and orientation, placeholders/format placeholders, debounce, auto-switch/correct parts, two‑digit year handling, reverse ranges, open/close/change events, calendar cell styling, and programmatic focus/open/close/navigation.
Definition
Namespace:Telerik.Blazor.Components
Assembly:Telerik.Blazor.dll
Type Parameters:
T
Syntax:
public class TelerikDateRangePicker<T> : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableInheritance: objectComponentBaseBaseComponentTelerikDateRangePicker<T>
Implements:
Inherited Members
Constructors
public TelerikDateRangePicker()Methods
protected override void BuildRenderTree(RenderTreeBuilder __builder)Overrides:
Closes the component.
public void Close()public override void Dispose()Overrides:
Moves focus to the end input.
Moves focus to the start input.
Moves the calendar to specific date in a view.
public void NavigateTo(DateTime date, CalendarView view)The date to which to navigate.
viewCalendarViewThe view to which to navigate.
Opens the component.
public void Open()Re-renders the component.
public void Refresh()Properties
Defines if the component will adapt and automatically change its rendering based on the current screen size. Default value is None.
[Parameter]
public AdaptiveMode AdaptiveMode { get; set; }Specifies if a caret can be displayed during input (when possible).
[Parameter]
public bool AllowCaretMode { get; set; }Defines if the end date can precede the start date.
[Parameter]
public bool AllowReverse { get; set; }[Accessibility] Describe the aria-label attribute for the component.
[Parameter]
public string AriaLabel { get; set; }Specifies if date parts will be auto corrected.
[Parameter]
public bool AutoCorrectParts { get; set; }Specifies which keys should switch date parts.
[Parameter]
public List<object> AutoSwitchKeys { get; set; }Specifies if date parts will be automatically switched when completed.
[Parameter]
public bool AutoSwitchParts { get; set; }Specifies the bottommost view in the picker calendar to which the user can navigate. Default value is Month.
[Parameter]
public CalendarView BottomView { get; set; }[Parameter]
public RenderFragment ChildContent { get; set; }Provides configuration for WebMCP tools, such as a Name to distinguish this DateRangePicker from others on the same page.
[Parameter]
public RenderFragment DateRangePickerSettings { get; set; }Time in ms between the last typed symbol and the updating of the value. Default is 150ms.
[Parameter]
public int DebounceDelay { get; set; }Specifies a list of dates that can not be selected.
[Parameter]
public List<DateTime> DisabledDates { get; set; }[Accessibility] Specifies whether the DateRangePicker is enabled.
[Parameter]
public bool Enabled { get; set; }Enables WebMCP tool registration for this DateRangePicker.
When true, DateRangePicker operations are exposed as tools discoverable by AI models through the browser.
Default value is false.
[Parameter]
public bool EnableWebMcpTools { get; set; }Specifies the value of the end date input.
[Parameter]
public T EndValue { get; set; }Specifies the handler that's called when the end value changes. Used for two-way binding.
[Parameter]
public EventCallback<T> EndValueChanged { get; set; }Specifies the model Expression for the End value.
[Parameter]
public Expression<Func<T>> EndValueExpression { get; set; }Specifies the fill mode of the DateRangePicker.
[Parameter]
public string FillMode { get; set; }Specifies the format of the date inputs of the DateRangePicker.
[Parameter]
public string Format { get; set; }Specifies the header template.
[Parameter]
public RenderFragment HeaderTemplate { get; set; }Specifies the inputmode attribute of the underlying HTML input element.
[Parameter]
public string InputMode { get; set; }Sets the maximum allowed date of the DateRangePicker.
[Parameter]
public DateTime Max { get; set; }Sets the minimum allowed date of the DateRangePicker.
[Parameter]
public DateTime Min { get; set; }Fires each time a calendar cell renders. Use the event to add a custom CSS class to each calendar cell based on its value.
[Parameter]
public Action<DateRangePickerCalendarCellRenderEventArgs> OnCalendarCellRender { get; set; }Specifies the callback that's called when the current value is committed (confirmed) by the user - either through the Enter key, or when the Component loses focus.
[Parameter]
public EventCallback<DateRangePickerChangeEventArgs> OnChange { get; set; }Defines the OnClose Event which is fired before the popup of the DateRangePicker is closed.
[Parameter]
public EventCallback<DateRangePickerCloseEventArgs> OnClose { get; set; }Defines the OnOpen Event which is fired before the popup of the DateRangePicker is opened.
[Parameter]
public EventCallback<DateRangePickerOpenEventArgs> OnOpen { get; set; }Specifies the orientation of the picker calendar. The available vaues are Horizontal (default) and Vertical.
[Parameter]
public CalendarOrientation Orientation { get; set; }Specifies the placeholder attribute of the component.
[Parameter]
public string Placeholder { get; set; }Defines the CSS class that will be applied to the rendered popup of the component.
[Parameter]
public string PopupClass { get; set; }[Accessibility] The parameter is used to specify if the input field should be read-only.
When set to true, the input becomes non-editable.
[Parameter]
public bool ReadOnly { get; set; }Specifies the roundness of the DateRangePicker.
[Parameter]
public string Rounded { get; set; }Specifies if the clear button will be displayed.
[Parameter]
public bool ShowClearButton { get; set; }Defines if the days from adjacent months are shown.
[Parameter]
public bool ShowOtherMonthDays { get; set; }Defines if additional week number column is added.
[Parameter]
public bool ShowWeekNumbers { get; set; }Specifies the Size of the DateRangePicker.
[Parameter]
public string Size { get; set; }Specifies the id of the start date input.
[Parameter]
public string StartId { get; set; }Specifies the value of the start date input.
[Parameter]
public T StartValue { get; set; }Specifies the handler that's called when the start value changes. Used for two-way binding.
[Parameter]
public EventCallback<T> StartValueChanged { get; set; }Specifies the model Expression for the Start value.
[Parameter]
public Expression<Func<T>> StartValueExpression { get; set; }Defines the subtitle text rendered in the header of the popup. Applicable only when Auto is set.
[Parameter]
public string Subtitle { get; set; }[Accessibility] The TabIndex of the component.
[Parameter]
public int? TabIndex { get; set; }Defines the title text rendered in the header of the popup. Applicable only when Auto is set.
[Parameter]
public string Title { get; set; }Specifies the maximum year to assume to be from the current century when typing two-digit year value. The default value is 68, indicating that typing any value less than 69 will be assumed to be 20xx, while 69 and larger will be assumed to be 19xx.
[Parameter]
public int TwoDigitYearMax { get; set; }Specifies the current CalendarView that will be displayed in the picker calendar.
[Parameter]
public CalendarView View { get; set; }The handler that will be called when the user navigates to a different CalendarView.
[Parameter]
public EventCallback<CalendarView> ViewChanged { get; set; }