How to: Customize a DateEdit

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

    Toolbox DateEdit

    <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

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

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

    DateEdit Week Numbers

  3. Set the Mask property to "'Date: 'dddd dd MMMM'. Time: 'h:mm tt" to apply a custom mask.

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

    DateEdit with custom mask