Click here to Skip to main content
Click here to Skip to main content

Yet Another Date/Time Picker

, 26 Oct 2009
Rate this:
Please Sign up or sign in to vote.
An article on yet another date/time picker
AnotherDateTimePicker.gif

Introduction

While developing an application that contained many date/time controls that needed different presentation formats, I found that the Windows .NET DateTimePicker control had some deficiencies and I was coding each situation differently thus cluttering my code with stuff that I didn't think needed to be in the way of the code surround the actual process being performed.

The most glaring deficiency that I found is that while typing a date in the control, the cursor did not move from one date component to another. I had to manually cursor right to get to the next component. When a time component was visible, after typing the year and pressing the cursor right, it skipped the time completely and went to the next control on the form. In addition, many of my forms needed to have a date displayed in long date format so I had to place a read only textbox control on the form and write code to populate it with the long date value based on what was entered into the date/time picker control. Hooray for reusable code !! Another pet peeve with the Windows control was that you could not enter an empty date or time so that a null value could be stored in a data column unless you used the check box option and then wrote code to not send the date to the data table if the check box was checked. (What a pain). So, I got to thinking, there has to be a better way of doing this thus bringing this control to fruition.

What's different with this one?

The difference with this one is that is very basic in its functionality yet it is able to present a null date as an empty date string in the control. Rather that put up something like "Select Date" in the date field, I merely present and empty date string like " / / " which should be obvious to users that it wants a date value entered in the text box. It still has the traditional picker button to the right of the text area that can be clicked to pop up a calender to choose a date from.

Another convenience feature that I put in it was full text box selection when the user tabs into the control. The tab control also will tab from date to time (if visible) with full selection. Using full selection makes it easier for the end user to type their date without having to manually select the any previouly entered value in either the date or time boxes.

Lastly, it give the developer three choice of visual presentation in that the developer can display the date only; date and time only; date with textual representation of the date; and all components - the text, the date and the time.

What is important here is that I didn't want to create a 500 pound gorilla with tons of code and tons of functionality. All I wanted was a simple control that would perform the way I needed it without any complex code. In other words, I applied the K.I.S.S. principle here (Keep It Simple, Silly). The illustration at the beginning of this article shows the 4 possible combinations of the control.

Under the Hood

I based the entire control on using masked edit boxes for the date and time along with a read only text box to display the long date form. In addition, I added a windows datetimepicker control and shrank the control so that only the picker button was visible. If the user clicks and picks a date via this control, the date value is stored in my control's value property.

TimePickerComponents.gif

The two main properties of this control are:

  • ShowLongDate (true or false)
  • ShowTime (true or false)

The properties merely determine which of the control's components are visible. The default value for both of these properties is true. Not sophisticated in that all these do is set the width property of the overall control and the visibility properties of either the long date display text box and/or time masked edit control. No rocket science here! I won't put the code here simply because I am sure everyone knows how to make this sort of thing work. If you really must see how I did it, then you can open the VB code and have a peek.

In addition to these two properties, there is a Value property which is used to get/set the date value. This is where the bulk of the code resides that works with the date value and what is displayed. It is really not very sophisticated code but is simple and most of all, it works!

    Public Property Value() As Object
        Get
            If txtDate.Text <> "" And txtDate.Text <> "  /  /" Then
                If txtTime.Visible Then
                    Return CType(CType(txtDate.Text, Date).ToShortDateString + " " +
                        txtTime.Text, Date)
                Else
                    Return CType(CType(txtDate.Text, Date).ToShortDateString, Date)

                End If
            Else
                Return Nothing
            End If

        End Get
        Set(ByVal value As Object)
            Try
                If Not IsNothing(value) Then
                    If Not IsDate(value) Then
                        Throw New Exception
                    Else
                        txtDate.Text = String.Format("{0:MM/dd/yyyy}",
                            CType(value, Date))
                        If txtTime.Visible Then txtTime.Text = String.Format(
                            "{0:HH:mm:ss}", CType(value, Date).TimeOfDay.ToString)
                    End If
                Else
                    txtDate.Text = ""
                    txtTime.Text = ""
                End If
                Me.Refresh()
            Catch ex As Exception
                MessageBox.Show("Invalid Date Value", "Invalid Property")
            End Try

        End Set

    End Property

Using the Control

This control is very simple to use and has two properties that make it versatile.

To use this simple control, just drop the VB code into your project, do a build and it will be available in your toolbox. Just drag and drop it onto your form like any other control and set the two properties for however you want to present the picker.

Both of these properties can be set either on the properties panel or in code. In almost every instance of use of this control, you will probably set the visibility properties on the property panel so that you can see the results immediately on your form as you lay it out. I cannot think of any situation where you would set these properties in code.

To set or get the values in the control, use the Value property.

	myDatetimePicker.Value = someDateValue
	
	someDateValue = myDatetimePicker.Value

Installing the Control

Again, there is no rocket science here. Just download the zip file, unzip it and add the control to your project. I wrote it in VB.NET but if anyone wants a C# version, it can be easily tranlated. I don't have a C# version simply because I am a VB programmer and do not use C#.

I named my control ctlDateTime but once you have added it to your project, you can simple rename it whatever you want.

History

Original code written 07/01/2009

Future Enhancements

If you have any comments of other features that may be included in this control, please speak up and let me know or if you have found a way to make it better or more efficient also let me know. I am totally open to constructive criticism and suggestions.

License

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

About the Author

Bryan Duchesne
Code 3 Systems, Inc.
United States United States
Bryan is a senior developer with Code 3 Systems, Inc. He has been coding in VB.NET for the last 4 years using Visual Studio 2005 and 2008. His IT career has spanned over 40 years doing work from computer operation to programming and management.

Comments and Discussions

 
GeneralMy vote of 1 PinmemberBooGhost10-Feb-10 5:08 

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

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

| Advertise | Privacy | Mobile
Web02 | 2.8.140709.1 | Last Updated 26 Oct 2009
Article Copyright 2009 by Bryan Duchesne
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid