How to: Customize a DateEdit

• May 22, 2020
• 2 minutes to read

A DateEdit editor allows you to edit DateTime values using a dropdown calendar. It supports masked input and week day displaying.

This document demonstrates how to create a DateEdit control and customize its settings.

Create a New Project and Add a DateEdit

1. Run MS Visual Studio.
2. Create a new WPF Application project. For this, choose New Project on the File menu or press Ctrl+Shift+N, and then choose WPF Application.

3. Now you should add a DateEdit component to the project.

   To do this, open the Visual Studio toolbox, locate the “DX: Common Controls” tab, choose the DateEdit toolbox item and drop it onto the window.

   

   XAML

   <Window x:Class="DateEdit_with_mask.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxe:DateEdit HorizontalAlignment="Center" Name="dateEdit1" VerticalAlignment="Center" Width="250" Height="30" />
       </Grid>
   </Window>
   

Customize the DateEdit

4. Right click the DateEdit and select Properties. Set the Mask property to “f” to apply the predefined full date-time pattern with a short time format (without displaying seconds).

   For information about Date-Time mask, see Mask Type: Date-time.

5. Set the ShowWeekNumbers property to true. Run the application to see the result.

   

6. Set the Mask property to “‘Date: ‘dddd dd MMMM’. Time: ‘h:mm tt” to apply a custom mask.

   XAML

   <Window x:Class="DateEdit_with_mask.MainWindow"
           xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
           xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
           Title="MainWindow" Height="350" Width="525" xmlns:dxe="http://schemas.devexpress.com/winfx/2008/xaml/editors">
       <Grid>
           <dxe:DateEdit HorizontalAlignment="Center" Name="dateEdit1" VerticalAlignment="Center" Width="305" Height="30" Mask="'Date: 'dddd dd MMMM'. Time: 'h:mm tt" ShowWeekNumbers="True" />
       </Grid>
   </Window>
   

   Run the application to see the result.