The requested page is not available for the requested platform. You are viewing the content for Default platform.

DxDateEdit Class

A Date Edit component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxDateEdit :
    DxDateEditBase

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

Note

Online Demo: Date Edit

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

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

    Invoke(StateHasChanged);     
  }
}

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

Inheritance

Object
Microsoft.AspNetCore.Components.ComponentBase
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DevExpress.Blazor.Internal.DxEditorBase<DateTime, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDropDownBase<DateTime, DevExpress.Blazor.Internal.JSInterop.DropDownJSInteropProxy>
DxDateEditBase
DxDateEdit

Implements

Microsoft.AspNetCore.Components.IComponent
Microsoft.AspNetCore.Components.IHandleEvent
Microsoft.AspNetCore.Components.IHandleAfterRender
See Also