Click here to Skip to main content
15,570,305 members
Articles / Desktop Programming / WPF
Tip/Trick
Posted 16 Mar 2015

Stats

13.3K views
84 downloads
2 bookmarked

Simple WPF Date Control

Rate me:
Please Sign up or sign in to vote.
2.78/5 (5 votes)
16 Mar 2015CPOL1 min read
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 5:41
Your Display Name Here19-Mar-15 5:41 
GeneralMy vote of 2 Pin
cjb11016-Mar-15 23:23
cjb11016-Mar-15 23:23 
Questionwhat Pin
Sacha Barber16-Mar-15 21:07
Sacha Barber16-Mar-15 21:07 
AnswerRe: what Pin
Oleg_10016-Mar-15 23:18
Oleg_10016-Mar-15 23:18 
GeneralRe: what Pin
sapatag16-Mar-15 23:43
sapatag16-Mar-15 23:43 
GeneralRe: what Pin
Oleg_10017-Mar-15 1:37
Oleg_10017-Mar-15 1:37 
GeneralRe: what Pin
Sacha Barber17-Mar-15 7:58
Sacha Barber17-Mar-15 7:58 
GeneralRe: what Pin
Oleg_10017-Mar-15 8:37
Oleg_10017-Mar-15 8: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.