Skip to main content

DevExpress v24.2 Update — Your Feedback Matters

Our What's New in v24.2 webpage includes product-specific surveys. Your response to our survey questions will help us measure product satisfaction for features released in this major update and help us refine our plans for our next major release.

Take the survey Not interested

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

NuGet Package: DevExpress.Blazor

#Declaration

C#
[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.

Razor
<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