DateTime Editing in WPF DateTimePicker (DateTimeEdit)

The DateTimeEdit control provides support for changing date time using text box. It supports both free form editing and mask based editing.

Mask editing

Mask editing is the default editing mode. In this mode, you can provide only valid input. Any invalid input given will be automatically corrected or ignored. In mask editing mode, the date will be separated into different fields such as date, month, year, minutes, hours, and seconds. The field can be updated by selecting the field and edit the value for the respectively fields or pressing the up (or) down arrow keys to increase or decrease the selected field respectively.

<syncfusion:DateTimeEdit Name="dateTimeEdit"
                         Height="25" 
                         Width="200"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.Width = 150;
dateTimeEdit.Height = 25;

DateTimeEdit with mask editing

NOTE

View Sample in GitHub

Validation

In mask editing mode, value will be validated and corrected immediately based on the edited input value. The following table demonstrates some of the validation in DateTimeEdit control:

Validation

Example

If the Space or next field character is pressed, focus will automatically navigated to next valid date / time field that can be edited. In short pattern, "/" character is used as the date separators: MM/dd/yyyy. On pressing "/" the focus will automatically navigated to next valid field.
Field focus will be automatically navigated when value of the selected field is filled. WPF DateTimeEdit automatic navigation
DateTimeEdit value will be validated and corrected immediately based on the edited input value. WPF DateTimeEdit automatic validation Ex: If the month field is February, then if we type 29 in day field year field will be automatically validated and moved to next leap year based on corresponding date.
Day field of DateTimeEdit can not be selected as it cannot be edited. -

NOTE

View Sample in GitHub

DateTime field navigation

By default, the focus field will be navigated automatically after the value has been validated to the corresponding field. If you want to manually change the date, month, year, hour or minute values, before that you navigate to the respective field by using the mouse or move the Left-Right keys in the keyboard.

Keyboard Navigation between datetime fields

The following table explains how the navigation performed between datetime fields,

S.No Key Description Image
1 Up Increase selected date, month or year value by 1. Increasing the datetime value
2 Down Decrease selected date, month or year value by 1. Descreasing the datetime value
3 Right Navigate to the previous field from the currently selected field. Navigate to the previous field from the currently selected field
4 Left Navigate to the next field from the currently selected field. Navigate to the next field from the currently selected field
5 Ctrl + Up Move forward from current selection view to next month or year selection view. Move forward from current selection view
6 Ctrl + Down Move backward from current selection view to previous month or date selection view. Move backward from current selection view
7 PageUp Move to previous month, date or year from the corresponding selection view. Navigate to previous date or month or year
8 PageDown Move to next month, date or year from the corresponding selection view. Navigate to next date or month or year
9 Home Select first date or month or year or decade of the current selection view. Navigate to first date or month or year
10 End Select last date or month or year or decade of the current selection view. Navigate to last date or month or year

NOTE

View Sample in GitHub

Change date time programmatically

You can set or change the selected datetime of the DateTimeEdit programmatically by setting the value to the DateTime property.

<syncfusion:DateTimeEdit DateTime="08/06/2020"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.DateTime = new DateTime(2020, 06, 30);

DateTimeEdit with mask editing

NOTE

View Sample in GitHub

Binding date time value

You can bind the selected date time value by using the DateTime property.

The following code snippets illustrate the value binding from one DateTimeEdit to another.

//ViewModel.cs
class ViewModel : NotificationObject {
    private DateTime selectedDate = DateTime.Now;

    public DateTime SelectedDate {
        get {
            return selectedDate;
        }
        set {
            selectedDate = value;
            this.RaisePropertyChanged(nameof(SelectedDate));
        }
    }
}
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>

<StackPanel HorizontalAlignment="Center" 
            VerticalAlignment="Center">
    <syncfusion:DateTimeEdit Name="dateTimeEdit1"
                             Height="25" 
                             Width="200" 
                             DateTime="{Binding SelectedDate, Mode=TwoWay}"/>
    <syncfusion:DateTimeEdit Name="dateTimeEdit2"
                             Height="25" 
                             Width="200" 
                             DateTime="{Binding SelectedDate, Mode=TwoWay}"
                             Margin="10"/>
</StackPanel>

WPF DateTimeEdit binding support

NOTE

View Sample in GitHub

Free form editing

You can change the DateTime value like a normal textbox editing by setting the CanEdit property value as true. Input given by an end-user, will be validated when pressing Enter key or if control lost its focus. If the entered value is invalid, it set the previously selected date as DateTime value. Otherwise, it will accept the given input.

<syncfusion:DateTimeEdit Name="dateTimeEdit"
                         CanEdit="True"/>
DateTimeEdit dateTimeEdit= new DateTimeEdit();
dateTimeEdit.CanEdit = true;

DateTimeEdit with free form editing

NOTE

View Sample in GitHub

Change date time on mouse wheel

You can increase or decrease the datetime by select the respective fields and mouse scrolling over the DateTimeEdit. If you want to restrict the user to change datetime by using mouse scrolling, use the EnableMouseWheelEdit property value as false. The default value of EnableMouseWheelEdit property is true.

<syncfusion:DateTimeEdit EnableMouseWheelEdit="True"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit= new DateTimeEdit();
dateTimeEdit.EnableMouseWheelEdit = true;

DateTimeEdit value changed on mouse wheel

NOTE

View Sample in GitHub

Change date time using up-down button

You can change the value of the datetime by selecting the respective date, month, year, minutes, hours, or seconds field and pressing the up or down button to increase or decrease the selected field respectively. By default, the updown button are hidden. you can show the UpDown button by setting the IsVisibleRepeatButton property value as true.

<syncfusion:DateTimeEdit IsVisibleRepeatButton="True" 
                         IsEnabledRepeatButton="True"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.IsVisibleRepeatButton= true;
dateTimeEdit.IsEnabledRepeatButton= true;

DateTimeEdit with updown button to edit value

NOTE

View Sample in GitHub

Disable up-down button

You can disable the updown button by setting the IsEnabledRepeatButton property as false. The default value of IsEnabledRepeatButton property is true.

<syncfusion:DateTimeEdit IsEnabledRepeatButton="False"
                         IsVisibleRepeatButton="True" 
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.IsEnabledRepeatButton= false;
dateTimeEdit.IsVisibleRepeatButton= true;

DateTimeEdit with updown button to edit value

NOTE

View Sample in GitHub

Show only the up-down button

You can show only the updown button by hiding the dropdown button. You can hide the dropdown button by setting the IsButtonPopUpEnabled property value as false.

<syncfusion:DateTimeEdit IsButtonPopUpEnabled="False"
                         IsVisibleRepeatButton="True" 
                         IsEnabledRepeatButton="True"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.IsVisibleRepeatButton= true;
dateTimeEdit.IsEnabledRepeatButton= true;
dateTimeEdit.IsButtonPopUpEnabled = false;

DateTimeEdit show only updown button

NOTE

View Sample in GitHub

Customize up-down appearance

You can change the background and UI of the updown button.

Change updown background

If you want to change the updown button background, use the RepeatButtonBackground property. You can also change the margin of the up and down button separately by using the DownRepeatButtonMargin and UpRepeatButtonMargin properties. The default value of RepeatButtonBackground property is Gainsboro and UpRepeatButtonMargin & DownRepeatButtonMargin properties is {0,0,0,0}.

<syncfusion:DateTimeEdit RepeatButtonBackground="Red" 
                         DownRepeatButtonMargin="1" 
                         UpRepeatButtonMargin="1"
                         IsVisibleRepeatButton="True"
                         Width="150" 
                         Height="25"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.RepeatButtonBackground= Brushes.Red;
dateTimeEdit.DownRepeatButtonMargin= new Thickness(1);
dateTimeEdit.UpRepeatButtonMargin = new Thickness(1);
dateTimeEdit.IsVisibleRepeatButton= true;

DateTimeEdit with red color background

NOTE

View Sample in GitHub

Custom UI for up and down button

You can customize the up and down button appearance separately by using the UpRepeatButtonTemplate and DownRepeatButtonTemplate properties.

<syncfusion:DateTimeEdit IsVisibleRepeatButton="True"
                         Name="dateTimeEdit">
    <!--Custom UI for up button--> 
    <syncfusion:DateTimeEdit.UpRepeatButtonTemplate>
        <ControlTemplate>
            <TextBlock Foreground="Yellow"
                       TextAlignment="Center" 
                       FontSize="15"
                       FontWeight="ExtraBold"  
                       Text="+" 
                       Background="Green"/>
        </ControlTemplate>
    </syncfusion:DateTimeEdit.UpRepeatButtonTemplate>

    <!--Custom UI for down button-->
    <syncfusion:DateTimeEdit.DownRepeatButtonTemplate>
        <ControlTemplate>
            <TextBlock Foreground="Yellow"
                       TextAlignment="Center"  
                       FontSize="15"
                       FontWeight="ExtraBold"
                       Text="-" 
                       Background="Red"/>
        </ControlTemplate>
    </syncfusion:DateTimeEdit.DownRepeatButtonTemplate>
</syncfusion:DateTimeEdit>

DateTimeEdit updown with custom UI

NOTE

View Sample in GitHub

Change month using alpha keys

You can change the month which is in abbreviated form or digit form, can be edited by select the month field and pressing the initial letter of respective month. You can enable it by setting the EnableAlphaKeyNavigation value as true and CanEdit property as false. The default value of EnableAlphaKeyNavigation property is false.

For example, If you pressing the j key, then it will selects January. On subsequent presses of the j key selects June and then July.

<syncfusion:DateTimeEdit EnableAlphaKeyNavigation="True" 
                         CanEdit="False" 
                         Pattern="LongDate"
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.EnableAlphaKeyNavigation = true;
dateTimeEdit.CanEdit = false;
dateTimeEdit.Pattern = DateTimePattern.LongDate;

DateTimeEdit changed month value using alpha keys

NOTE

View Sample in GitHub

Delete and edit the date time value

By default, date time field will be selected and you can only override the date time field value without deleting the old value. You can delete the existing field values by pressing the BackSpace or Delete key and enter the new values. You can enable it by setting the EnableBackspaceKey and EnableDeleteKey properties as true. The default value of EnableBackspaceKey and EnableDeleteKey property is false.

<syncfusion:DateTimeEdit EnableBackspaceKey="True"
                         EnableDeleteKey="True" 
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.EnableBackspaceKey = true;
dateTimeEdit.EnableDeleteKey = true;

DateTimeEdit deleting the datetime field values

NOTE

View Sample in GitHub

Change date time using custom calendar and clock

You can add your own calendar and clock control in DateTimeEdit to selected the date and time.

Custom calendar

If you want to select the Date from the own calendar, use the DateTimeCalender property and set the custom date selector. You can enable the calendar by setting DropDownView property as Calendar.

//ViewModel.cs
class ViewModel : NotificationObject {
    private DateTime selectedDate = DateTime.Now;

    public DateTime SelectedDate {
        get {
            return selectedDate;
        }
        set {
            selectedDate = value;
            this.RaisePropertyChanged(nameof(SelectedDate));
        }
    }
}
<Window.DataContext>
    <local:ViewModel/>
</Window.DataContext>

<syncfusion:DateTimeEdit DateTime="{Binding SelectedDate, Mode=TwoWay}" 
                         DropDownView="Calendar" 
                         Pattern="ShortDate"
                         Name="dateTimeEdit">
    <syncfusion:DateTimeEdit.DateTimeCalender>
        <syncfusion:SfDateSelector SelectorItemWidth="80" 
                                   SelectorItemHeight="80" 
                                   ShowDoneButton="False" 
                                   SelectedDateTime="{Binding SelectedDate, Mode=TwoWay}"/>
    </syncfusion:DateTimeEdit.DateTimeCalender>
</syncfusion:DateTimeEdit>

Custom calendar in WPF DateTimeEdit

NOTE

View Sample in GitHub

Custom clock

If you want to select the time from the own clock, use the Clock property and set the custom time selector. You can enable the custom clock by setting DropDownView property as Clock.

//ViewModel.cs
class ViewModel : NotificationObject {
    private DateTime selectedTime = DateTime.Now;

    public DateTime SelectedTime {
        get {
            return selectedTime;
        }
        set {
            selectedTime = value;
            this.RaisePropertyChanged(nameof(SelectedTime));
        }
    }
}
<syncfusion:DateTimeEdit DateTime="{Binding SelectedTime, Mode=TwoWay}" 
                         DropDownView="Clock"
                         Pattern="ShortDate"
                         Name="dateTimeEdit">
    <syncfusion:DateTimeEdit.Clock>
        <syncfusion:SfTimeSelector SelectorItemWidth="70"  
                                   SelectorItemHeight="70"
                                   ShowCancelButton="False"
                                   ShowDoneButton="False"
                                   SelectedTime="{Binding SelectedTime, Mode=TwoWay}"/>
    </syncfusion:DateTimeEdit.Clock>
</syncfusion:DateTimeEdit>

Customize the Clock in DateTimeEdit

NOTE

View Sample in GitHub

NOTE

You can also use both custom clock and calendar in the full datetime pattern by setting the DropDownView property as Combined. View Sample in GitHub

Setting the null value

If you want to set or change the null value for the DateTimeEdit, use the NullValue property. you can enable it only by setting the IsEmptyDateEnabled property as true and ShowMaskOnNullValue property as false. If IsEmptyDateEnabled property is false, then the default date time is displayed. If the ShowMaskOnNullValue property true, then datetime mask is shown.

<syncfusion:DateTimeEdit ShowMaskOnNullValue="False"
                         NullValue="{x:Null}"
                         IsEmptyDateEnabled="True" 
                         x:Name="dateTimeEdit" 
                         Height="25" 
                         Width="200"  />
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.ShowMaskOnNullValue= false;
dateTimeEdit.IsEmptyDateEnabled= true;
dateTimeEdit.NullValue = null;

DateTimeEdit display null value

NOTE

View Sample in GitHub

Show mask on null value

you can show only the mask on null value by setting the ShowMaskOnNullValue property value as true.

<syncfusion:DateTimeEdit ShowMaskOnNullValue="True"
                         NullValue="{x:Null}"
                         IsEmptyDateEnabled="True" 
                         Name="dateTimeEdit" />
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.ShowMaskOnNullValue= true;
dateTimeEdit.IsEmptyDateEnabled= true;
dateTimeEdit.NullValue = null;

DateTimeEdit display null value

Show watermark when value is null

If you want to display any watermark text instead of null value, use the NoneDateText property to setting the watermark text. you can enable it only by setting the IsEmptyDateEnabled property as true, ShowMaskOnNullValue property as false and NullValue property as null. The default value of NoneDateText property is string.Empty.

<syncfusion:DateTimeEdit NoneDateText="Select the date"
                         ShowMaskOnNullValue="True"
                         NullValue="{x:Null}"
                         IsEmptyDateEnabled="True" 
                         Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.NoneDateText= "Select the date";
dateTimeEdit.ShowMaskOnNullValue= true;
dateTimeEdit.IsEmptyDateEnabled= true;
dateTimeEdit.NullValue = null;

DateTimeEdit displays the watermark text

NOTE

View Sample in GitHub

Select the date time field on focus

By default, the first field of the date time is selected to edit when control got focus. you can set the last field of date time as selected field when control got focus by setting the OnFocusBehavior property as CursorAtEnd. The default value of OnFocusBehavior property is CursorOnFirstCharacter.

NOTE

If control got focus by directly clicking the date time field, OnFocusBehavior property value not take effects.

<syncfusion:DateTimeEdit OnFocusBehavior="CursorAtEnd" 
                         Name="dateTimeEdit" />
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.OnFocusBehavior = OnFocusBehavior.CursorAtEnd;

DateTimeEdit select the date time field on focus

NOTE

View Sample in GitHub

Value Changed Notification

The selected datetime changed in DateTimeEdit can be examined using DateTimeChanged event. The DateTimeChanged event contains the old and newly selected date time values in the OldValue and NewValue properties.

<syncfusion:DateTimeEdit DateTimeChanged="dateTimeEdit_DateTimeChanged" 
                          Name="dateTimeEdit"/>
DateTimeEdit dateTimeEdit = new DateTimeEdit();
dateTimeEdit.DateTimeChanged += dateTimeEdit_DateTimeChanged;

You can handle the event as follows,

private void dateTimeEdit_DateTimeChanged(DependencyObject d, DependencyPropertyChangedEventArgs e) {
    //Get old and new values
    var oldValue = e.OldValue;
    var newValue = e.NewValue;
}