DxDateRangePicker<T> Class
A component that allows you to select date ranges.
Namespace: DevExpress.Blazor
Assembly: DevExpress.Blazor.v24.1.dll
NuGet Package: DevExpress.Blazor
Declaration
public class DxDateRangePicker<T> :
DxMaskedInputBase<T>,
IDropDownOwner,
IFocusableEditorType Parameters
| Name | Description |
|---|---|
| T | The data type. Supported types: DateTime, DateOnly, and their nullable instances. |
Remarks
The DevExpress Date Range Picker (<DxDateRangePicker>) for Blazor allows you to select a range of dates in a drop-down calendar.
Add a Date Range Picker to a Project
Follow the steps below to add the Date Range Picker component to an application:
- Use a DevExpress Project Template to create a new Blazor Server or Blazor WebAssembly application. If you use a Microsoft project template or already have a Blazor project, configure your project to incorporate DevExpress Blazor components.
- Add the following markup to a
.razorfile:<DxDateRangePicker>…</DxDateRangePicker>. - Configure the component: specify start and end dates, set the range of available dates, specify the display format, and so on (see the sections below).
.NET 8 and .NET 9 Specifics
Blazor Date Range Picker does not support static render mode. Enable interactivity to use the component in your application. Refer to the following topic for more details: Enable Interactive Render Mode.
Set Start and End Dates
Use StartDate and EndDate properties to specify the date range selected in the component. You can also use the @bind attribute to bind these properties to data fields. Refer to the following topic for details: Two-Way Data Binding.
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)">
</DxDateRangePicker>
@* --or-- *@
<DxDateRangePicker @bind-StartDate="@DateTimeStart"
@bind-EndDate="@DateTimeEnd">
</DxDateRangePicker>
@code {
DateTime? DateTimeStart { get; set; } = DateTime.Today;
DateTime? DateTimeEnd { get; set; } = DateTime.Today.AddDays(7);
}
If you do not use two-way data binding, handle the StartDateChanged and EndDateChanged events to respond to date changes.
<DxDateRangePicker StartDate="@modelStartDate"
EndDate="@modelEndDate"
StartDateChanged="@((DateTime newStartDate) => OnStartDateChanged(newStartDate))"
EndDateChanged="@((DateTime newEndDate)=> OnEndDateChanged(newEndDate))" />
<p></p>
@Alert_StartDate
<p></p>
@Alert_EndDate
@code {
DateTime modelStartDate=DateTime.Today;
DateTime modelEndDate = DateTime.Today.AddDays(7);
string Alert_StartDate { get; set; }
string Alert_EndDate { get; set; }
void OnStartDateChanged(DateTime newStartDate) {
modelStartDate = newStartDate;
Alert_StartDate = "The start date changed:" + newStartDate;
}
void OnEndDateChanged(DateTime newEndDate) {
modelEndDate = newEndDate;
Alert_EndDate = "The end date changed:" + newEndDate;
}
}
Set Range of Available Dates
You can use the MinDate and MaxDate properties to limit the available date range.
<DxDateRangePicker @bind-StartDate="@DateTimeStart"
@bind-EndDate="@DateTimeEnd"
MinDate="@MinDate"
MaxDate="@MaxDate"/>
@code {
DateTime DateTimeStart { get; set; } = DateTime.Today;
DateTime DateTimeEnd { get; set; } = DateTime.Today.AddDays(7);
DateTime MinDate { get; set; }
DateTime MaxDate { get; set; }
protected override void OnInitialized() {
MinDate = DateTimeStart.AddDays(-7);
int days = DateTime.DaysInMonth(DateTimeStart.Year, DateTimeStart.Month);
MaxDate = new DateTime(DateTimeStart.Year, DateTimeStart.Month, days).AddDays(14);
}
}
Nullable Date and Placeholder
If the Date Range Picker component is bound to a nullable object, users can delete the editor’s value (set it to null).
You can also set the ClearButtonDisplayMode property to Auto to show the Clear button when the editor has a non-null value. Use the NullText property to specify the prompt text (placeholder) when the editor’s value is null.
<DxDateRangePicker @bind-StartDate="@DateTimeStart"
@bind-EndDate="@DateTimeEnd"
NullText="Select a date range..."
ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto">
</DxDateRangePicker>
@code {
DateTime? DateTimeStart { get; set; } = DateTime.Today;
DateTime? DateTimeEnd { get; set; } = DateTime.Today.AddDays(7);
}
You can also specify a custom null value for the Date Range Picker component. This value can be used with nullable and regular DateTime types. For more information, refer to NullValue.
Display Format
The DevExpress Blazor Date Range Picker supports standard date formats:
You can use the DisplayFormat property to format the editor’s display values.
<DxDateRangePicker @bind-StartDate="@DateTimeStart"
@bind-EndDate="@DateTimeEnd"
DisplayFormat="From: {0:M}; To: {1:M}"/>
@code {
DateTime DateTimeStart { get; set; } = DateTime.Today;
DateTime DateTimeEnd { get; set; } = DateTime.Today.AddDays(7);
}
Set the First Day of the Week
The first day of a week in the Date Range Picker’s calendar depends on the current culture settings. Use the FirstDayOfWeek property to specify a different day.
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
FirstDayOfWeek="DayOfWeek.Monday">
</DxDateRangePicker>
To specify a rule that determines the first week of the year, use the WeekNumberRule property.
Highlight Special Dates
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 its settings.
The following code applies different styles to different dates:
<DxDateRangePicker @bind-StartDate="@DateTimeStart"
@bind-EndDate="@DateTimeEnd">
<DayCellTemplate>
<a class="@GetCssClassNames(context)">@context.Day.ToString()</a>
</DayCellTemplate>
</DxDateRangePicker>
@code {
DateTime DateTimeStart { get; set; } = DateTime.Today;
DateTime DateTimeEnd { get; set; } = DateTime.Today.AddDays(7);
CalendarData Data { get; set; } = new CalendarData();
string GetCssClassNames(DateTime date) {
if(Data.PersonalDays.Exists(d => DaysEqual(d, date)))
return "fw-bold text-success";
if(Data.Holidays.Exists(d => DaysEqual(d, date)))
return "text-danger";
if(Data.BirthDates.Exists(d => DaysEqual(d, date)))
return "fw-bold text-info";
return string.Empty;
}
bool DaysEqual(DateTime date1, DateTime date2) {
return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
}
}
Appearance Customization
Use the SizeMode property to specify Date Range Picker size. The following code applies different size modes to Date Range Picker components:
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
SizeMode="SizeMode.Small"></DxDateRangePicker>
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
SizeMode="SizeMode.Medium"></DxDateRangePicker>
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
SizeMode="SizeMode.Large"></DxDateRangePicker>
To customize Date Range Picker input, use the InputCssClass property. The following code snippet applies the custom style to the text within the input:
<style>
.my-style {
font-weight: 800;
}
</style>
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
InputCssClass="my-style"/>
)
For more information, refer to the following help topics:
Hide Built-In Drop-Down Button
Set the ShowDropDownButton to false to hide the built-in button that invokes a drop-down calendar. If you need a custom drop-down button, you can add a new command button.
Add Command Buttons
You can add custom command buttons to the Date Range Picker component. Refer to Command Buttons for more information.
The following code hides the built-in drop-down button, adds a new drop-down button, and specifies its position:
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
ShowDropDownButton=false>
<Buttons>
<DxDateEditDropDownButton Position="EditorButtonPosition.Left"/>
</Buttons>
</DxDateRangePicker>
Read-Only State
The Blazor Date Range Picker supports a read-only state. Set the ReadOnly property to true to activate this option.
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
ReadOnly="true"/>
Drop-Down Window Direction
Use the DropDownDirection property to specify the direction in which the drop-down calendar is displayed relative to the input element. The default value is Down. The following code changes the direction to Up:
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
DropDownDirection="DropDownDirection.Up" />
Note
If the editor is close to a browser window’s edge and there is not enough space to display the drop-down window in the specified direction, the drop-down window is displayed in the opposite direction.
Input Validation
You can add a standalone Date Range Picker or the Form Layout component to Blazor’s standard EditForm. This form validates user input based on data annotation attributes defined in a model and indicates errors.
For more information, refer to the following help topic: Validate Input.
HTML Attributes and Events
You can use HTML attributes and events to configure the Date Range Picker.
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
id="daterangepicker"
name="daterangeppicker"
autocomplete="on"
@oninput="MyFunction">
</DxDateRangePicker>
@code {
void MyFunction(){
//...
}
}