Click here to Skip to main content
15,867,453 members
Articles / Desktop Programming / WPF
Tip/Trick

Simple WPF Date Control

Rate me:
Please Sign up or sign in to vote.
2.78/5 (5 votes)
16 Mar 2015CPOL1 min read 14.7K   84   2   8
This tip describes a simple WPF Date control that makes it easier to type in the dates.

Introduction

The control I present here can come in handy when the user just needs to type in the date using the keyboard only rather than selecting the date from the drop-down/lookup calendar. Despite the task simplicity, I did not find any ready-to-use code or control with similar functionality. As opposed to the "standard" WPF DatePicker, this one adds some more validation to each date part, but at the same time does not require usage of Tab or mouse for moving to the next control.

Background

The control inherits from WPF's UserControl and contains 3 TextBoxes - for day, month and year. There is only one Date format - dd.MM.yy, since our users don't need others.

The control appearance is as follows:

Each TextBox has a text limit of 2 characters, and also subscribes to next TextBox events:

  • GotFocus - Here, we select all text in the current element, to allow overwriting it once user starts printing.
  • PreviewKeyDown - Here, we filter non-numeric keys and check whether the focus should be moved to next/previous control.
  • KeyUp - Finally validates user input and starts Beep if it is not valid.

All these methods are implemented in abstract class to let similar Time control implementation. Then SimpleDatePicker inherits the described control and then overrides some DateTime-type validation specific methods.

Using the Code

To use the code, let's add reference to XAML's namespaces list:

XML
<Window x:Class="SimpleDatePickerTest.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:pick="clr-namespace:SimplePickers"
        Background="LemonChiffon"
        Title="MainWindow" Height="200" 
        Width="300" WindowStartupLocation="CenterScreen">

Then put the control itself with the proper binding (please note TwoWay since the default is OneWay):

XML
<pick:SimpleDatePicker x:Name="sdpOrderDate" Width="80" 
Date="{Binding Path=Date, Mode=TwoWay}" />

I also have added special TextBlock to verify my control's value:

XML
<TextBlock Grid.Column="0" Grid.Row="2" HorizontalAlignment="Right" 
VerticalAlignment="Center" Margin="0,5,0,0" 
Text="{Binding Path=Date, ElementName=sdpOrderDate, StringFormat='dd.MM.yyyy'}"/>

The project with the control source code and usage example is attached to this post - feel free to download and use it everywhere.

License

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


Written By
Software Developer
Israel Israel
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
QuestionJust Wondering? Pin
Your Display Name Here19-Mar-15 4:41
Your Display Name Here19-Mar-15 4:41 
There is a very nice implementation of the DateTimePicker control in JQuery. I was just wondering if marrying that existant support with WPF would be a good idea or not? If so what would the design of that one be?

Well, the control would have to be hosted in a webbrowser but bound to the properties of the C# side in a view model. It would mean that Javascript would have to be downloaded and usable in that control when presented. Because the JQuery control is built around Get's and Post's there would have to be a miniserver just for that control.... Sounds like a headache for sure.... However, if WPF is able to marry itself seamlessly to "all things web" then, we have unlimited scalability as well as millions of open source libraries to pick from....

I wonder what it would take to create hybrid WPF applications that implement web based technologies at the project level only... Kind of like a MVC, WPF combined solution that does not use IIS....
GeneralMy vote of 2 Pin
cjb11016-Mar-15 22:23
cjb11016-Mar-15 22:23 
Questionwhat Pin
Sacha Barber16-Mar-15 20:07
Sacha Barber16-Mar-15 20:07 
AnswerRe: what Pin
Oleg_10016-Mar-15 22:18
Oleg_10016-Mar-15 22:18 
GeneralRe: what Pin
sapatag16-Mar-15 22:43
sapatag16-Mar-15 22:43 
GeneralRe: what Pin
Oleg_10017-Mar-15 0:37
Oleg_10017-Mar-15 0:37 
GeneralRe: what Pin
Sacha Barber17-Mar-15 6:58
Sacha Barber17-Mar-15 6:58 
GeneralRe: what Pin
Oleg_10017-Mar-15 7:37
Oleg_10017-Mar-15 7:37 

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.