Using a Date/Time Picker Control

 

Some Microsoft eMbedded Visual Basic developers need to have a control to handle simplified date and time entry. This article shows the major features of the vbceDateTimePicker control as well as some code samples.

Applies to
   Microsoft Windows Powered Pocket PC 2000
   Microsoft eMbedded Visual Basic
   Microsoft eMbedded Visual Tools (eVT)
   vbceDateTimePicker control
   Download 622-CF.exe

Gotchas

The price for the control is relatively high.

Languages Supported

English

Date and Time Entry

If you have been developing business applications for some time, you know that data entry validation is key in order to create high quality software. On the PC, there are numerous controls to help your users enter valid data. However, when you are developing with eMbedded Visual Basic (eVB) you are left with the TextBox control and your own coding skills (which may be sufficient, but not the kind of time you would love to spend). You could use a ComboBox for time entry with predefined intervals, much in the same way you enter appointments in the Calendar.

Also, on the Pocket PC the problem is even bigger. The user does not want to enter the date via the Soft Input Panel (SIP) because this takes a long time. If we wait with validation until the user finishes entering the date, he or she will be frustrated as to why we accepted the wrong date to start with. If we try to validate the entry instantly (via events like TextBox_Change), the user might be confused if he or she is interrupted during date entry.

We need something simpler, and as many of the applications shipped with the Pocket PC use the Calendar control, we would like to keep the user interface consistent with those applications.

What Can vbceDateTimePicker Do?

Before we look at the code, let's begin with exploring what the vbceDateTimePicker control allows us to do. In the following form I have modified the example project that was provided with the control into an eVB application.

Figure 1: vbceDateTimePicker demo.

As you can see in Figure 1, you can pull down the date entry field and get the standard Calendar control to select the date. The control allows you to pick any date; change the month by tapping one of the directional buttons or the control caption; and select a month from the list that appears, and also go to today's date by tapping the text at the bottom of the control. If you select a date, you get some more options (see Figure 2).

Figure 2: Additional options.

By tapping the Set Color button you change the background of the control to red; the Set Date button changes the current date to my birthday (back in 1965). And by tapping the Get Current Date button, you retrieve the current date from the control and display it in a message box.

Additionally, you can change the display format of the date control by entering a format string and tap the top Set Format button. The date format string can contain the same tokens as defined in the GetDateFormat Microsoft Windows CE API (Application Programming Interface). See the help file for eVT for a complete reference. Here are the most important tokens:

Value Description
d Day of month as digits with no leading zero for single-digit days.
dd Day of month as digits with leading zero for single-digit days.
ddd Day of week as a three-letter abbreviation.
dddd Day of week as its full name.
M Month as digits with no leading zero for single-digit months.
MM Month as digits with leading zero for single-digit months.
MMM Month as a three-letter abbreviation.
MMMM Month as its full name.
y Year as last two digits, with no leading zero for years less than 10.
yy Year as last two digits, with a leading zero for years less than 10.
yyyy Year represented by full four digits.

As you can see on the bottom of the form, you can also use the control for time input. When you have selected any of the time parts (hour, minute, or second), you can use the up and down arrows to increment or decrement the value. As with date entry, you can change the display format by entering a format string and tap the bottom Set Format button. The time format string can contain the same tokens as defined in the GetTimeFormat Windows CE API. See the help file for eVT for a complete reference. Here are the most important tokens:

Value Description
h Hours with no leading zero for single-digit hours; 12-hour clock
hh Hours with leading zero for single-digit hours; 12-hour clock
H Hours with no leading zero for single-digit hours; 24-hour clock
HH Hours with leading zero for single-digit hours; 24-hour clock
m Minutes with no leading zero for single-digit minutes
mm Minutes with leading zero for single-digit minutes
s Seconds with no leading zero for single-digit seconds
ss Seconds with leading zero for single-digit seconds
t One character time marker string, such as A or P
tt Multicharacter time marker string, such as AM or PM

As you can see the usage is very straightforward and if you spend some time entering date and time values, you will see the benefit of not having to enter the values via the SIP.

Code Walkthrough

Let us start with the basic functionality. We want to be able to set the date of the control, and this is the code to do it:

DateTimePicker1.Month = 9
  
  
DateTimePicker1.Day = 23
  
  
DateTimePicker1.Year = 1965
  
  

And then we want to get the selected date when it is time to save the value somewhere (probably in a database). We do this by:

MsgBox "Current date is: " & _
  
  
       DateTimePicker1.Month & "/" & _
  
  
       DateTimePicker1.Day & "/" & _
  
  
       DateTimePicker1.Year
  
  

There is really nothing to it. The corresponding properties for time are, of course:

DateTimePicker2.Hour = 14 ' Has to be 24-hour value
  
  
DateTimePicker2.Minute = 23
  
  
DateTimePicker2.Seconds = 46
  
  

And I think you have guessed how to retrieve the time. There is even a way to get the ordinal number for the selected weekday, and you can show the name of the day by:

MsgBox "Current day of week: " & _
  
  
       WeekdayName(DateTimePicker1.DayOfWeek + 1)
  
  

The format string is set via a simple property:

DateTimePicker1.Format = "MM'/'dd'/'yy"

For a complete example, download 622-CF.exe.

Deployment

When you are about to deploy your applications that use the vbceDateTimePicker control, and if you are using the eVB Application Installation Wizard, you will not get the vbceDateTimePicker control added to the setup. You will have to add this control yourself by updating the installation information (extension INF) file and rebuilding the installation cabinet (extension CAB) files.

In short, the updates to the INF file are:

  • Add vbceDateTimePicker.dll to the CESelfRegister key in the [DefaultInstall...] section for each processor type.
  • Add a vbceDateTimePicker.dll=3 key to the [SourceDisksFiles...] section for each processor type.
  • Add a vbceDateTimePicker.dll,,0x80000000 key to the [Files...] section for each processor type.

And then you have to copy the vbceDateTimePicker.dll for each processor type to the corresponding setup directory. Finally you have to rebuild the cabinet files with the command line supplied in the Readme.txt file created by the Application Installation Wizard, and then replace the old files in the CD1 subdirectory.

An Alternative

If you are a hardcore programmer and want to save the money for purchasing this control, there is a code sample up on VBCE.com that enables you to open up the Calendar control via pure Windows CE APIs. The code is not pure eVB, but can easily be converted to an eVB application.

Conclusion

As the ability to enter dates and time in an efficient manner is especially important on a Pocket PC, you should consider adding the vbceDateTimePicker control to your development tools.