DxDateEdit<T>.CustomDisabledDate Event

Allows you to disable selection of individual dates in the DxDateEdit<T> component based on custom logic.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll


public Action<CalendarCustomDisabledDateEventArgs> CustomDisabledDate { get; set; }

Event Data

The CustomDisabledDate event's data class is CalendarCustomDisabledDateEventArgs. The following properties provide information specific to this event:

Property Description
Date Gets a DateTime object that corresponds to the processed date.
IsDisabled Specifies whether the processed date can be selected.


You can disable specific dates in the Date Edit’s calendar. These dates are grayed out.

The Date Edit's calendar disables dates that are out of the [MinDate; MaxDate] range. To disable dates based on custom logic, handle the CustomDisabledDate event. This event is raised each time a day cell is rendered.

Use the Date event argument's property to determine the processed day. The IsDisabled property specifies whether the processed date is available.

<DxDateEdit @bind-Date="@DateTimeValue" CustomDisabledDate="@OnCustomDisabledDate"></DxDateEdit>

@code {
    DateTime dateTimeValue = DateTime.Now;
    DateTime DateTimeValue { get => dateTimeValue; set { dateTimeValue = value; InvokeAsync(StateHasChanged); } }

    void OnCustomDisabledDate(CalendarCustomDisabledDateEventArgs args) {
        args.IsDisabled = args.Date < DateTime.Today.AddDays(-20) || GetDisabledDates().Exists(d => DaysEqual(d, args.Date));
    bool DaysEqual(DateTime date1, DateTime date2) {
        return (date1.Year == date2.Year && date1.DayOfYear == date2.DayOfYear);
    List<DateTime> GetDisabledDates() {
        DateTime baseDate = DateTime.Today;
        return new List<DateTime>() { baseDate.AddDays(-9), baseDate.AddDays(-4), baseDate.AddDays(-3), baseDate.AddDays(3), baseDate.AddDays(5), baseDate.AddDays(6), baseDate.AddDays(15) };

Date Edit Disabled Dates

Run Demo: Date Edit - Disabled Dates

In scroll picker mode, the Date Edit component shows a notification message each time a user tries to navigate to a disabled date. To customize the notification text, use the DisabledDateNotificationText property.

See Also