DateEdit Class
A Date Edit with a dropdown calendar.
Namespace: DevExpress.WinUI.Editors
Assembly: DevExpress.WinUI.Editors.v23.2.dll
NuGet Package: DevExpress.WinUI
#Declaration
[ToolboxTabName("DX.23.2: Common Controls")]
public class DateEdit :
TextEdit,
ISupportTextEditable
#Remarks
The DevExpress WinUI DateEdit displays a drop-down calendar that allows users to select dates.
#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.
<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.
<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(); }
}
#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
:
<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 |
---|---|
Null |
Gets or sets the text displayed within the edit box when the editor’s value is null. This is a dependency property. |
Null |
Gets or sets a null value for the editor. This is a dependency property. |
Allow |
Gets or sets whether end-users can set the editor’s value to a null reference. This is a dependency property. |
Show |
Gets or sets whether to display the null text. This is a dependency property. |
Show |
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:
- Foreground, NullTextForeground, SelectionHighlightBrush, TextAlignment.
- Background, Padding, Margin.
- CornerRadius, BorderBrush, BorderThickness.
<dxe:DateEdit NullText="Input a date" Foreground="#FF505050" Background="#FFE9EBEC"
CornerRadius="14" BorderBrush="#FF0D3A50" BorderThickness="2" Width="150" SelectionHighlightBrush="#FF0D3A50" />
#Format Text
You can use the following properties to adjust font settings in a DateEdit: