Blazor DateRange Picker Component Overview
The Blazor DateRange Picker component allows the user to select a date range (start and end date) - both from a visual list (calendar) or to type it into a date input that can accept only dates. You can control the format shown in the input, and dates the user cannot select, as well as implement validation and respond to events.
The DateRange Picker component is part of Telerik UI for Blazor, a
professional grade UI library with 80 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
To use a Telerik Date Range Picker for Blazor:
- add the
TelerikDateRangePickertag - bind its
StartValueandEndValueparameters to fields in your model
Basic date range picker
@StartValue?.ToString("dd MMM yyyy")
<br />
@EndValue?.ToString("dd MMM yyyy")
<br />
<TelerikDateRangePicker @bind-StartValue="@StartValue"
@bind-EndValue="@EndValue">
</TelerikDateRangePicker>
@code {
public DateTime? StartValue { get; set; } = DateTime.Now;
public DateTime? EndValue { get; set; } = DateTime.Now.AddDays(10);
}
Features
The Blazor Date Range Picker component exposes the following features:
BottomView- Defines the bottommost view in the popup calendar to which the user can navigate to. Defaults toCalendarView.Month.DisabledDates- Specifies a list of dates that can not be selected as the start or end of the range, see the Live Demo: Date Range Picker Disabled Dates.Enabled- Specifies whether typing in the input is allowed.Format- Specifies the format of the DateInputs of the DateRangePicker. Read more about supported data formats in Telerik DateInput for Blazor UI article.EndIdandStartId- render as theidattribute on the<input />element, so you can attach a<label for="">to the input.Min- The earliest date that the user can select.Max- The latest date that the user can select.StartValueandEndValue- The current values of the inputs for start and end of the range. Can be used for two-way binding.View- Specifies the current view that will be displayed in the popup calendar.Class- The CSS class that will be rendered on the main wrapping element of the Date Range PickerPopupClass- additional CSS class to customize the appearance of the Date Range Picker's dropdown.TabIndex- maps to thetabindexattribute of bothinputHTML elements in the component and them both will have the sametabindex. You can use it to customize the order in which the inputs in your form focus with theTabkey.-
Validation - see the Input Validation article.
- To restrict the user from writing dates in the input so that the end is after the start, you must implement a custom data annotation attribute (you can find an example in the article linked above). The DateRangePicker component does not do this out-of-the-box in order to provide smooth user experience - the code cannot know what the user intent is and they might fix the range if they are given the chance, so correcting the input immediately may prevent them from using it comfortably. The component can fully control the user experience in the popup calendar and it ensures there that the range values are valid (start is before the end). If the user chooses an end date before the start, this date becomes the new start and they can choose the end again.
Events - a set of events that let you respond to the user actions with the component, and also to extract the data from it.
The date range picker is, essentially, a date input and a calendar and the properties it exposes are mapped to the corresponding properties of these two components. You can read more about their behavior in the respective components' documentation.