Click here to Skip to main content
12,886,892 members (35,528 online)
Click here to Skip to main content
Add your own
alternative version


24 bookmarked
Posted 2 Dec 2010

A WPF DateTimePicker That Works Like the One in Winforms

, 9 Sep 2011 CPOL
Rate this:
Please Sign up or sign in to vote.
A WPF DateTimePicker that Works like the one in Winforms


When I started moving from Winforms to WPF, there was one control I really missed, and that was the DateTimePicker, as implemented in Winforms. WPF has the datepicker, but what I wanted was a control where you can easily tab from year to month to day, and use the arrow keys to change values.

Note: Qwertie has made an excellent C# version of this control, ironing out the worst bugs in the process. :) You can check out his version at


The code plays around with some of the fundamental techniques required when building a user control in WPF.

Using the Code

To use the code, just compile the DTPicker and add a reference to the DLL in your project. (or include the DTPicker project as a subproject to your project. The solution contains two projects; DTPicker, where the usercontrol resides, and TestDTPicker, a small WPF project to test the DateTimePicker in.


The XAML for the control is pretty straight forward.

 <UserControl x:Class="DateTimePicker"






        <ControlTemplate x:Key="IconButton" 

        TargetType="{x:Type ToggleButton}">
                <ContentPresenter />

        <DTPicker:BoolInverterConverter x:Key="BoolInverterConverter" />
    <StackPanel Orientation="Horizontal">
        <TextBox x:Name="DateDisplay" 



                    MinHeight="{Binding ElementName=PopUpCalendarButton, 
 Path=ActualHeight}" >2001-01-01 12:30</TextBox>
        <ToggleButton Template="{StaticResource IconButton}" 





                      IsHitTestVisible="{Binding ElementName=CalendarPopup,
 Path=IsOpen, Mode=OneWay, Converter={StaticResource BoolInverterConverter}}" >

          <Image Source="Calendar.Icon.bmp" Stretch="
          None" HorizontalAlignment="Left"  />
        <Popup IsOpen="{Binding Path=IsChecked, ElementName=PopUpCalendarButton}" 

               x:Name="CalendarPopup" Margin="0,-7,0,0"


            <Calendar Margin="0,-1,0,0"

                      x:Name="CalDisplay" ></Calendar>


There are four main variables in our control:

  • SelectedDate - The selected date :)
  • DateFormat - How this date should be displayed (yyyy-MM-hh etc.)
  • MinimumDate - The minimum date value that can be selected
  • MaximumDate - The maximum date value that can be selected

The interesting thing is that the values of SelectedDate, MinimumDate and MaximumDate are all interconnected. So when declaring the Dependency properties for these, I have to include a coerce callback function.

Public Shared ReadOnly SelectedDateProperty As DependencyProperty = _
                           DependencyProperty.Register("SelectedDate", _
                           GetType(Nullable(Of Date)),
                           GetType(DateTimePicker), _
                           New FrameworkPropertyMetadata(Date.Now,
                           New PropertyChangedCallback(AddressOf OnSelectedDateChanged),
                           New CoerceValueCallback(AddressOf CoerceDate)))  

Here is the CoerceDate function:

 Private Shared Function CoerceDate(ByVal d As DependencyObject,
ByVal value As Object) As Object
       Dim dtpicker As DateTimePicker = CType(d, DateTimePicker)
       Dim current As Date = CDate(value)
       If current < dtpicker.MinimumDate Then
           current = dtpicker.MinimumDate
       End If
       If current > dtpicker.MaximumDate Then
           current = dtpicker.MaximumDate
       End If
       Return current
   End Function

Points of Interest

One thing that was hard to figure out was how to move the focus away from my control. It turned out to be an easy oneliner:

Me.MoveFocus(New TraversalRequest(FocusNavigationDirection.Previous)) 

Things That Can Be Done Better

The image of the calendar is encapsulated in the control. Some would probably like to expose the image as a property. Also although SelectedDate is a nullable, I should really write more code to display a default text when there is no SelectedDate.


  • 2010-12-02: First attempt to write the article
  • 2011-09-08: Added a note about Qwerties version


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Magnus Gudmundsson
Software Developer (Senior) CyberDaDa
Sweden Sweden
Magnús Gudmundsson has been programming on and off since he got his first sinclair spectrum sometimes in the murky 80's.
Currently he is trying to start a company called CyberDada

Nowadays Magnús mostly programs in .Net. He is equally fluent in vb and c#, has done webforms, winforms, webservices, wpf, and then some Smile | :)

You may also be interested in...


Comments and Discussions

QuestionBetter this than Qwertie one Pin
ninodago28-Oct-16 4:42
memberninodago28-Oct-16 4:42 
GeneralReally Thankful Pin
Muhammad Mukarram17-Oct-15 18:31
memberMuhammad Mukarram17-Oct-15 18:31 
QuestionGetBindingExpression Pin
is.vlad18-Nov-14 6:50
memberis.vlad18-Nov-14 6:50 
AnswerRe: GetBindingExpression Pin
is.vlad18-Nov-14 7:42
memberis.vlad18-Nov-14 7:42 
GeneralRe: GetBindingExpression Pin
Magnus Gudmundsson18-Nov-14 9:44
memberMagnus Gudmundsson18-Nov-14 9:44 
GeneralRe: GetBindingExpression Pin
is.vlad18-Nov-14 19:40
memberis.vlad18-Nov-14 19:40 
GeneralRe: GetBindingExpression Pin
is.vlad18-Nov-14 19:42
memberis.vlad18-Nov-14 19:42 
GeneralRe: GetBindingExpression Pin
is.vlad18-Nov-14 20:34
memberis.vlad18-Nov-14 20:34 
GeneralRe: GetBindingExpression Pin
Magnus Gudmundsson18-Nov-14 20:53
memberMagnus Gudmundsson18-Nov-14 20:53 
GeneralRe: GetBindingExpression Pin
is.vlad19-Nov-14 1:06
memberis.vlad19-Nov-14 1:06 
QuestionCan't change DateFormat in DataGrid? Pin
Member 372081025-Jan-13 8:49
memberMember 372081025-Jan-13 8:49 
SuggestionGood example of WPF DateTimePicker In DataGrid Pin
JohnDetroit3-Jun-12 1:39
memberJohnDetroit3-Jun-12 1:39 
Questionits simple and useful Pin
musto2310-May-12 20:17
membermusto2310-May-12 20:17 
QuestionC# version + improvements [modified] Pin
Qwertie16-Aug-11 11:37
memberQwertie16-Aug-11 11:37 
AnswerRe: C# version + improvements Pin
Magnus Gudmundsson16-Aug-11 19:27
memberMagnus Gudmundsson16-Aug-11 19:27 
GeneralRe: C# version + improvements Pin
Qwertie17-Aug-11 4:28
memberQwertie17-Aug-11 4:28 
GeneralRe: C# version + improvements Pin
Member 1131974118-Dec-14 0:17
memberMember 1131974118-Dec-14 0:17 
GeneralRe: C# version + improvements Pin
Qwertie18-Dec-14 6:37
memberQwertie18-Dec-14 6:37 
QuestionDate format not accepted Pin
John Cserkuti4-Aug-11 3:45
memberJohn Cserkuti4-Aug-11 3:45 
AnswerRe: Date format not accepted Pin
Magnus Gudmundsson4-Aug-11 6:57
memberMagnus Gudmundsson4-Aug-11 6:57 
Generalfunny I did one of these the other day Pin
Sacha Barber2-Dec-10 23:34
mvpSacha Barber2-Dec-10 23:34 
GeneralRe: funny I did one of these the other day Pin
Magnus Gudmundsson3-Dec-10 1:01
memberMagnus Gudmundsson3-Dec-10 1:01 
GeneralRe: funny I did one of these the other day Pin
Sacha Barber3-Dec-10 21:19
mvpSacha Barber3-Dec-10 21:19 
GeneralMy vote of 5 Pin
Dalek Dave2-Dec-10 12:24
memberDalek Dave2-Dec-10 12:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.170424.1 | Last Updated 9 Sep 2011
Article Copyright 2010 by Magnus Gudmundsson
Everything else Copyright © CodeProject, 1999-2017
Layout: fixed | fluid