DxDateEdit<T> Class

A Date Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxDateEdit<T> :
    DxDateEditBase<T>

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.

Blazor_DateEdit_Overview

Add Date Edit to a Project

To add the <DxDateEdit> component to an application, follow the steps below:

  • Create and configure the application as described in the Create a New Blazor Application document.

  • Add the <DxDateEdit>...</DxDateEdit> markup to your application.

  • 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 between .NET Framework's MinValue and MaxValue date and time values.

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

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

@code {
    DateTime DateTimeValue = DateTime.Today;
}

To respond to the editor's date change, handle the DateChanged event. The code below enables the Update Date button once the Date Edit component's value is changed.

<DxDateEdit Date="@Date" DateChanged="@((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;

    InvokeAsync(StateHasChanged);     
  }
}

Nullable Date

If the Date Edit component has the Nullable DateTime type, users can delete the editor 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 display the prompt text in the editor when its value is null.

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

@code {
    DateTime? DateTimeValue { get; set; }
}

Blazor-DateEdit-ClearButton

NOTE

Online Demo: Date Edit - Nullable Date

Date Format

Use the Format property to change the format of Date Edit's displayed value. The Format property supports standard date and time format strings only.

For example, to display date/time values in the full date/time format, use the code below.

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

Blazor_DateEdit_Format

Set the First Day of the Week

Use the FirstDayOfWeek property property to specify the first day of the week.

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

Blazor_DateEdit_FirstDayOfWeek

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.

    Blazor-DateEdit-ScrollPicker

  • Other device types display a datepicker as a calendar.

    Blazor_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 propety to define the date format for each part (a day, month, and year).

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

@code {
    DateTime DateTimeValue;
}

Read-Only State

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

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

Online Demo: Date Edit - Read-Only Mode

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDropDownBase<T, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDateEditBase<T>
DxDateEdit<T>
See Also