DxDateEdit<T> Class

A Date Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v20.2.dll

Declaration

public class DxDateEdit<T> :
    DxDropDownBase<T, DropDownJSInteropProxy>,
    IInputBase,
    IDropDownJSInteropProxyServer,
    IJSCallback,
    IDisposable

Type Parameters

Name Description
T

The data type. Supported types: DateTime and Nullable DateTime.

Remarks

The DevExpress Date Edit for Blazor (<DxDateEdit>) displays a drop-down calendar that allows users to select dates. You can combine two Date Editors to implement a date range picker.

DateEdit Overview

Additionally, you can add a time section to the component. This allows users to select date-time values or type them in the edit box.

Date Edit - Time Section

Run Demo Watch Video

View Example: How to implement the date range selector

Add a Date Edit to a Project

Follow the steps below to add the Date Edit component to an application:

  1. 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.
  2. Add the <DxDateEdit>...</DxDateEdit> markup to a Razor page.
  3. Configure the component (see the sections below).

Edit Value

Use the Date property to specify the date that is selected in <DxDateEdit>. The date range is limited by the MinValue and MaxValue properties. Refer to the following section for details: Set a Date Range.

You can use the @bind attribute to bind the Date property to a data field. Refer to the following topic for details:Two-Way Data Binding.

<DxDateEdit Date="DateTime.Today"></DxDateEdit>

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

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Today;
}

If you do not use two-way data binding, handle the DateChanged event to respond to the editor's date change. The code below enables the Update Date button once the Date Edit component's value is changed.

<DxDateEdit Date="@Date" DateChanged="@((DateTime newValue) => OnDateChanged(newValue))"></DxDateEdit>
<button type="button" class="btn btn-primary" disabled="@IsDisabled">Update Date</button>

@code {
    DateTime Date = DateTime.Today;
    bool IsDisabled = true;

    void OnDateChanged(DateTime newValue) {
        Date = newValue;
        if (newValue != DateTime.Today)
            IsDisabled = false;
        else IsDisabled = true;
    }
}

Nullable Date and Placeholder

If the Date Edit component is bound to a Nullable DateTime 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.

<DxDateEdit @bind-Date="@DateTimeValue"
            ClearButtonDisplayMode="DataEditorClearButtonDisplayMode.Auto"
            NullText="Select a date..."></DxDateEdit>

@code {
    DateTime? DateTimeValue { get; set; } = new DateTime(2020, 01, 01);
}

DateEdit ClearButton

Run Demo: Date Edit - Null Date Values and Placeholder

You can also specify a custom null value for the Date Edit component. This value can be used with nullable and regular DateTime types. For more information, refer to NullValue.

Date Format

Use the Format property to format the Date Edit's value in edit mode when the editor is focused, and use the DisplayFormat property to format the editor’s display value when the editor is not focused. If you do not set the DisplayFormat property, the Format is applied in display and edit modes.

The following example demonstrates how to apply the long date format in display mode and the short date format in edit mode:

<DxDateEdit @bind-Date="@DateTimeValue" DisplayFormat="D" Format="d"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

DateEdit Format

Run Demo: Date Edit - Display Format

Refer to the following Microsoft help topics for more information about supported formats: Standard Date and Time Format Strings and Custom Date and Time Format Strings.

Set a Date Range

Use the MinDate and MaxDate properties to specify a range of available dates. The Date Edit's calendar disables dates that are out of the range and hides navigation arrows for them. If a user types a date that is out of the range, the Date Edit keeps the previously selected date.

The default minimum and maximum values are System.DateTime.MinValue and System.DateTime.MaxValue.

NOTE

The maximum date should be greater than the minimum date. Otherwise, an exception occurs.

<DxDateEdit Date="DateTime.Today"
            MinDate="@(new DateTime(2020, 06, 11))" 
            MaxDate="@(new DateTime(2020, 06, 25))" />

The maximum date

Run Demo: Date Edit — Date Range

Time Section

Date Edit allows you to edit date-time values. Users can use the time picker in the drop-down window to edit date-time values or enter the value in an edit box.

To add the time section to the component, set the TimeSectionVisible property to true.

<DxDateEdit @bind-Date="@DateTimeValue"
            TimeSectionVisible="true"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

Date Edit - Time Section

The section's appearance depends on the current culture. If the culture does not use a 12-hour time format, time values are in 24-hour format and the section's AM/PM column is not displayed.

Run Demo: Date Edit - Time Section

Disable Dates

Handle the CustomDisabledDate event to disable individual dates. This event is raised each time a day cell is rendered.

<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

Set the First Day of the Week

The first day of a week in the Date Edit's drop-down calendar depends on the current culture settings. Use the FirstDayOfWeek property to specify a different day.

<DxDateEdit Date="DateTime.Today" FirstDayOfWeek="DayOfWeek.Monday"></DxDateEdit>

DateEdit FirstDayOfWeek

To specify a rule that determines the first week of the year, use the WeekNumberRule property.

Size Modes

Use the SizeMode property to specify a Date Edit size. The code below applies different size modes to Date Edit components.

<DxDateEdit @bind-Date="@DateTimeValue" SizeMode="SizeMode.Small"></DxDateEdit>

<DxDateEdit @bind-Date="@DateTimeValue" SizeMode="SizeMode.Medium"></DxDateEdit>

<DxDateEdit @bind-Date="@DateTimeValue" SizeMode="SizeMode.Large"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

For more information, refer to the following topic: Size Modes.

Datepicker Modes

<DxDateEdit> adapts a datapicker to the device type.

  • Mobile and tablet devices display a datapicker as a scroll picker.

    NOTE

    Mobile devices show a datepicker in a modal window.

    DateEdit ScrollPicker

  • Other device types display a datepicker as a calendar.

    DateEdit Overview

Set the PickerDisplayMode property to Calendar or ScrollPicker to show the same datepicker type on all devices. For the scroll picker, you can also use the ScrollPickerFormat property to define the date format for each part (day, month, and year).

<DxDateEdit @bind-Date="@DateTimeValue" PickerDisplayMode="DatePickerDisplayMode.ScrollPicker" 
            ScrollPickerFormat="dddd MMMM yyyy"></DxDateEdit>

@code {
    DateTime DateTimeValue { get; set; } = DateTime.Now;
}

Run Demo: Date Edit - Adaptive Datepicker

Input Validation

You can add a standalone Date Edit 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.

<EditForm Model="@starship" Context="EditFormContext">
    <DataAnnotationsValidator />
    <DxFormLayout >
        <DxFormLayoutItem Caption="Production Date:" ColSpanMd="6" >
            <Template >
                <DxDateEdit @bind-Date="@starship.ProductionDate" />
            </Template>
        </DxFormLayoutItem>
        @*...*@
    </DxFormLayout>
</EditForm>

@code {
    private Starship starship=new Starship();
}

For more information, refer to the following help topic: Validate Input.

Run Demo: Form Validation

Read-Only State

<DxDateEdit> supports a read-only state. Set the ReadOnly property to true to activate this option.

<DxDateEdit ReadOnly="true"> </DxDateEdit>

Run Demo: Date Edit - Read-Only and Disabled Modes

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:

<DxDateEdit Date="DateTime.Today" DropDownDirection="DropDownDirection.Up" />

DateEdit

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.

HTML Attributes and Events

You can use HTML attributes and events to configure the Date Edit.

<DxDateEdit Date="DateTime.Today"
            id="date"
            name="date"
            autocomplete="on"
            @oninput="MyFunction">
</DxDateEdit>

@code {
    void MyFunction(){
        //...
    }
}

Inheritance

Show 11 items
Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDataEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxResizableEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDropDownBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDateEdit<T>
See Also