blazor-devexpress-dot-blazor-dot-dxdaterangepicker-1.md
A component that allows you to select date ranges.
Namespace : DevExpress.Blazor
Assembly : DevExpress.Blazor.v25.2.dll
NuGet Package : DevExpress.Blazor
public class DxDateRangePicker<T> :
DxMaskedInputBase<T>,
IDropDownOwner,
IFocusableEditor
| Name | Description |
|---|---|
| T |
The data type. Supported types: DateTime, DateOnly, and their nullable instances.
|
The DevExpress Date Range Picker (<DxDateRangePicker>) for Blazor allows you to select a range of dates in a drop-down calendar.
Follow the steps below to add the Date Range Picker component to an application:
.razor file: <DxDateRangePicker>…</DxDateRangePicker>.Refer to the following list for the component API reference: DxDateRangePicker Members.
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.
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;
}
}
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);
}
}
Run Demo: Range of Available Dates
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);
}
Run Demo: Null Date Values and Placeholder
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 additional information, refer to NullValue.
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);
}
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.
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"
SizeMode="Params.SizeMode"
CssClass="cw-320"
InputId="deHighlightDates">
<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 null;
}
bool DaysEqual(DateTime date1, DateTime date2) {
return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
}
}
using System;
using System.Collections.Generic;
// ...
class CalendarData {
public CalendarData() {
DateTime baseDate = DateTime.Today;
PersonalDays = GetPersonalDays(baseDate);
Holidays = GetHolidays(baseDate);
BirthDates = GetBirthDates(baseDate);
}
public List<DateTime> PersonalDays { get; }
public List<DateTime> Holidays { get; }
public List<DateTime> BirthDates { get; }
List<DateTime> GetPersonalDays(DateTime baseDate) {
return new List<DateTime>() {
baseDate.AddDays(-7),
baseDate.AddDays(-2),
baseDate.AddDays(-1),
baseDate.AddDays(3),
baseDate.AddDays(4),
baseDate.AddDays(9),
baseDate.AddDays(10),
baseDate.AddDays(12),
baseDate.AddDays(15)
};
}
List<DateTime> GetHolidays(DateTime baseDate) {
return new List<DateTime>() {
baseDate.AddDays(-14),
baseDate.AddDays(-8),
baseDate.AddDays(12),
baseDate.AddDays(13)
};
}
List<DateTime> GetBirthDates(DateTime baseDate) {
return new List<DateTime>() {
baseDate.AddDays(-20),
baseDate.AddDays(-5),
baseDate,
baseDate.AddDays(1),
baseDate.AddDays(6),
baseDate.AddDays(7),
baseDate.AddDays(17)
};
}
}
.dxbl-calendar-selected-range > a {
color: #fff!important;
}
.dxbl-calendar-day > a {
text-decoration: none;
}
Run Demo: Highlight Special Dates
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:
<DxDateRangePicker StartDate="DateTime.Today"
EndDate="DateTime.Today.AddDays(7)"
InputCssClass="my-style"/>
.my-style {
font-weight: 800 !important;
}
For additional information, refer to the following help topics:
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.
You can add custom command buttons to the Date Range Picker component. Refer to Command Buttons for additional 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>
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"/>
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.
The DevExpress Blazor Date Range Picker supports keyboard navigation. Users can navigate to the editor’s input element and within the drop-down calendar.
Note
Keyboard support allows users to interact with application content in cases they cannot use a mouse or they rely on assistive technologies (like screen readers or switch devices). Refer to the Accessibility help topic for information on other accessibility areas that we address.
The following shortcut keys are available when the editor’s input element is focused:
| Shortcut Keys | Description |
|---|---|
| Tab | Moves focus to the next focusable element on a page. Note that the drop-down button, custom buttons, and the Clear button are excluded from the page tab sequence. |
| Shift + Tab | Moves focus to the previous focusable element on a page. |
| Alt + Down Arrow | Opens the drop-down calendar. |
The following shortcut keys are available when the drop-down calendar is open:
| Shortcut Keys | Description |
|---|---|
| Tab | Moves focus between root navigation elements. |
| Shift + Tab | Moves focus backwards between root navigation elements. |
| Left Arrow | Moves focus to the previous cell. |
| Right Arrow | Moves focus to the next cell. |
| Up Arrow | Moves focus one cell up. |
| Down Arrow | Moves focus one cell down. |
| Ctrl + Up Arrow | Navigates to a view with a wider date range: from month view to year view, from year view to decade view, and so on. |
| Ctrl + Down Arrow | Navigates to a more detailed view: from decade view to year view, from year view to month view, and so on. |
| Page Up | Navigates from the current month/year/decade/century to the previous month/year/decade/century. |
| Page Down | Navigates from the current month/year/decade/century to the next month/year/decade/century. |
| Home | Moves focus to the first day of the current week. |
| End | Moves focus to the last day of the current week. |
| Enter or Space | Allows you to select a date range. |
| Focus the start date and press Enter or Space to select it. Then use Arrows, Home, End, Page Up, or Page Down to navigate to the end date and press Enter or Space to select it. After that, the component closes the drop-down calendar, updates StartDate and EndDate parameter values, and focuses the input element. | |
| Shift | Allows you to select a date range. |
| Focus the first date, press Shift and navigate to the end date (use Arrows, Home, End, Page Up, or Page Down ). When the Shift key is released, the component closes the drop-down calendar, updates StartDate and EndDate parameter values, and focuses the input element. | |
| Esc or Alt + Up Arrow | Closes the drop-down calendar and moves focus to the input element. |
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 additional information, refer to the following help topic: Validate Input.
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(){
//...
}
}
If a Blazor application throws unexpected exceptions, refer to the following help topic: Troubleshooting.
The Date Range Picker mask does not support full-width numerals produced by Input Method Editors (IMEs). The editor accepts only standard ASCII digits.
As a workaround, you can implement a JavaScript function that handles the component input element’s beforeinput and pasteevents to convert input data to a standard string.
Object ComponentBase DxComponentBase DxDataEditor<T> DxInputDataEditorBase<T> DxMaskedInputBase<T> DxDateRangePicker<T>
See Also