DateEdit Class

A Date Edit with a dropdown calendar.

Assembly: DevExpress.WinUI.Editors.v23.2.dll

Declaration

C#
VB.NET

[ToolboxTabName("DX.23.2: Common Controls")]
public class DateEdit :
    TextEdit,
    ISupportTextEditable

<ToolboxTabName("DX.23.2: Common Controls")>
Public Class DateEdit
    Inherits TextEdit
    Implements ISupportTextEditable

Remarks

The DevExpress WinUI DateEdit displays a drop-down calendar that allows users to select dates.

DateTime

Add a DateEdit to a Project

Follow the steps below to add a DateEdit control to an application:

Reference the DevExpress.WinUI NuGet package. Refer to the Get Started topic for more information.
Add the following markup to a XAML page: <dxe:DateEdit>…</dxe:DateEdit>.
Configure the component (see the sections below).

Edit Value

Use the DateTime property to set or bind the edit value to data.

If a user changes the edit value, the DateTime property accepts the change only if Input Validation is successful. If validation fails, the control keeps its previous value and prompts the user to enter a different value.

XAML

<Window ...
    xmlns:System="using:System"
    xmlns:dxe="using:DevExpress.WinUI.Editors">
    <StackPanel Orientation="Vertical">
        <dxe:DateEdit Name="dateEdit" DateTime="{x:Bind System:DateTime.Now}" />
        <dxe:DateEdit Name="bounddateEdit" EditValue="{x:Bind DateValue}"/>
    </StackPanel>
</Window>

public sealed partial class MainWindow : Page {
        public DateTime DateValue { get; set; } = new DateTime(2012, 05, 24);

    public MainWindow() {
        this.InitializeComponent(); }
}

You can handle the BaseEdit.EditValueChanged event to respond to changes made in the editor.

Minimum and Maximum Values

Use the MinValue and MaxValue properties to specify the minimum and maximum allowed values.

Use the SetMinimum() or SetMaximum() method to set the editor’s value to the minimum or maximum value.

If AllowRoundOutOfRangeValue is true and a user enters a value outside the allowed range, the editor corrects user input to either MaxValue or MinValue.

XAML

<Window ...
    xmlns:dxe="using:DevExpress.WinUI.Editors">

    <StackPanel Orientation="Vertical">
        <dxe:DateEdit Name="dateEdit" DateTime="{Binding Date.DateTime}"
                      MinValue="{x:Bind StartDate}" MaxValue="{x:Bind EndDate}" />
    </StackPanel>
</Window>

public sealed partial class MainWindow : Page {
        public DateTime StartDate { get; set; } = new DateTime(2012, 05, 24);
        public DateTime EndDate { get; set; } = new DateTime(2022, 10, 01);

    public MainWindow() {
        this.InitializeComponent(); }
}

DateEdit - Minimum and Maximum Values

Masked Input

A DateEdit supports masked input. Refer to the following topic for more information: Masked Input.

Input Validation

Refer to the following documentation topic for more information: Input Validation

The following code sample restricts the DateEdit value to a date between 01/01/2012 and 01/10/2021:

XAML

<dxe:DateEdit Name="dateEdit" EditValue="{x:Bind System:DateTime.Now}" Validate="dateEdit_Validate"/>

public DateTime StartDate { get; set; } = new DateTime(2021, 01, 01);
public DateTime EndDate { get; set; } = new DateTime(2021, 01, 10);

private void dateEdit_Validate(object sender, DevExpress.WinUI.Editors.ValidationEventArgs e) {
    if (((DateTime)e.Value) == null) {
        e.IsValid = false;
        e.Handled = true;
        e.ErrorContent = "The value is empty!";
        e.ErrorType = DevExpress.WinUI.Editors.ErrorType.Critical;
    }
    else if (Convert.ToDateTime(e.Value) <= EndDate && Convert.ToDateTime(e.Value) >= StartDate) {
        e.IsValid = false;
        e.Handled = true;
        e.ErrorContent = "The value is not valid!";
        e.ErrorType = DevExpress.WinUI.Editors.ErrorType.Warning;
    }
}

Text Input Availability

Set the BaseEdit.IsReadOnly property to true to activate read-only mode.

DateEdit Header

You can use the Header property to add a Header to a DateEdit. Use the HeaderTemplate property to customize the header appearance.

Null Text

The following properties specify NullText behavior and appearance:

Property	Description
NullText	Gets or sets the text displayed within the edit box when the editor’s value is null. This is a dependency property.
NullValue	Gets or sets a null value for the editor. This is a dependency property.
AllowNullInput	Gets or sets whether end-users can set the editor’s value to a null reference. This is a dependency property.
ShowNullText	Gets or sets whether to display the null text. This is a dependency property.
ShowNullTextForEmptyValue	Gets or sets whether to display the null text for the Empty value. This is a dependency property.

Customize Appearance

You can use the following properties to customize the DateEdit appearance:

DevExpress Editors | DateEdit - Unfocused State

XAML

<dxe:DateEdit NullText="Input a date" Foreground="#FF505050" Background="#FFE9EBEC"
              CornerRadius="14" BorderBrush="#FF0D3A50" BorderThickness="2" Width="150" SelectionHighlightBrush="#FF0D3A50" />