Creating a Time control in .NET

Recently I was working on an ASP.NET application that required the end user to enter and submit a time on the web form. I wasn't comfortable leaving it up to a textbox, since I would need both an hour, a minute, and an AM/PM. Leaving this to a textbox entry would require validation for both the user to use a ":" as well as enter an "AM" or "PM" If you ask me... this sounds like a pain in the rear-end.

When I thought about my options a little more thoroughly, I realized that I could use drop down lists for the user to enter their time, and I can convert it to a date type, and in essence with only a little effort. If we add a calendar control to our form (which this example will assume you did already), you can get a specific date and time.

1. Create our drop down lists

Our end result is to have the following:

Select Class Start Time:

123456789101112:00153045 AMPM

To do so, create three ASP drop down lists, the first for your hours, the second for your minutes (I only needed 15 minute intervals), and the third for your "AM" or "PM" selection.

2. Create your function

How does that song go, "conjunction junction, what's your function?" Sorry, got a little off track there ;)

Converting our selections into a specific time, there is some logic to consider. First of all, keep in mind that the default time to a date datatype is 12:00 AM, so that is your time to start with. So, with that in mind, the way you handle a selection of "12:30 AM" is very different than how you would handle "4:15 PM".

I know, I know.. less talky more codey.. ok, here's your function:


Function ConvertToDate(ByVal HrCtrl As System.Web.UI.WebControls.DropDownList, _
ByVal MinCtrl As System.Web.UI.WebControls.DropDownList, _
ByVal AMPMCtrl As System.Web.UI.WebControls.DropDownList, _
ByVal StartDate As Date) As Date

'Set the date of the class, StartDate is passed in from the selected date from our Calendar control, which is NOT depicted in this example!
Dim ourDate As Date = StartDate
'Get the hour selected
Dim Hour As Double = CDbl(HrCtrl.SelectedValue)
'Get the Minutes selected
Dim Min As Double = CDbl(MinCtrl.SelectedValue)
'A boolean value for AM/PM... remember, by default the time is 12:00 AM
Dim PM As Boolean = False
'Is our selected AM/PM value PM?
If AMPMCtrl.SelectedValue = "PM" Then PM = True
'If the selected time was 12:00 AM, we do nothing with the hours
If (Hour = 12 And Not PM) Then
'Just add any minutes.. if any
ourDate = ourDate.AddMinutes(Min)
Else
'Add any hours selected in the hour select box
ourDate = ourDate.AddHours(Hour)
'Now add any minutes
ourDate = ourDate.AddMinutes(Min)
'If the selected AM/PM is PM, we MAY have to add 12 hours to the current time
If PM Then
'If the selected hour is NOT 12, then we add 12 hours, otherwise adding 12 hours to
'the additional 12 hours would cause the time to be incorrect
If Hour <> 12 Then
ourDate = ourDate.AddHours(CDbl(12))
End If
End If
End If

Return ourDate

End Function

As you can see, the function above isn't very complicated. It's parameters are your ASP.NET controls you created in step 1, so it's a little more sophisticated and flexible than just accepting plain text values.

It starts out by converting your hours and minuted to double precision values. The reason for this is because the AddHours and AddMinutes functions both accept a double datatype. Next, we check to see if both the hour "12" and "AM" was selected. If so, all we want to do is add any minutes selected, since adding 12 hours to the default time of 12 AM would make the time 12 PM, which is obviously incorrect. If 12:xx AM wasn't selected, we add any hours and minutes to our time. Finally, we check if "PM" was selected. If it was, and "12" wasn't selected, we add 12 additional hours to our time, making it a "PM" time.

3. Call our function

The hardest part is done, all we have to do now is call our function above. You can do so by using code similar to the following.

Dim ourSelectedDate As Date = ConvertToDate(Me.OurHourControl, Me.OurMinuteControl, _
Me.OurAMPMControl, Me.OurCalendarControl.SelectedDate)

As stated throughout this example, we assume that you have a Calendar control on your page, and we pass the date as our last parameter. If you don't need a Calendar control, then just pass a date in for that parameter instead. With this function created, if you have a need to create a date/time range from select boxes, you can use one function for all of your needs. And, it's fairly efficient to boot!

Besides that, that's all you need to return a date/time from a series of drop down lists. Pretty simple, eh???