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.v23.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
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.

Remarks

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) };
    }
}

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.