Introduction

Did you ever used the DateTimePicker that comes with .NET? If so, you must appreciate the easy to use drop down calendar where you click on the date that you need. You can even navigate the months and the years very easily at the top of its panel. Every user that I know just loves this component.

The DateTimePicker can also be converted in a TimePicker. Unfortunately, I've never been satisfied with this TimePicker since it uses a numeric up-down control to select your time. There is no drop down feature. The user must manually type in his/her time and that has always bothers me. I asked myself if there could be an easier way to select a time.

With my TimePicker, this problem is solved. The TimePicker shows a drop down panel very similar to the DateTimePicker. Instead of having dates, you have hours and minutes on the panel. You click on the time that you want and then click outside of the panel to see the time being assigned to the TimePicker control.

TimePicker v2 finally complete

After 4 years, I finally decided to update the TimePicker. Based on the comments, it had a few bugs in it. I took the time to fix some of them and added a few new features to it. I tried to keep the same functionalities to avoid any breaking changes. If I broke something, I'm sorry. For people who would like a TimePicker for .NET 3.0 or on Vista, I haven't worked with those technologies (yet). Try it out and let me know.

New feature

KeyToHidePicker is a new property on the TimePicker. Assign a keyboard key to hide the picker. This is useful for people who want to hide the picker from the keyboard instead of clicking somewhere else. The default key is Esc.

Increasing the font size will make the control bigger. Earlier versions weren't doing this. Drop down button and check box will also resize.

Added the TimeChangeEventArgs class. When the Value property of the TimePicker changes, an event is launched with an instance of TimeChangeEventArgs. It holds the previous TimeSpan value and the new value. This might be the only breaking change. In the previous version, I was passing an EventArgs object.

When the check box is visible, it controls the enable or disable state of the time. When check box is not visible, the Enable property of the TimePicker controls the state of the TimePicker.

Fixes

I paint the time instead of using .NET controls. This gave me more control.

The minutes are now drawn correctly when TimePicker is in a tab page.

The separator between the hours and minutes is drawn correctly.

Refactored the code to make it more .NET 2.0. The classes are now partial with the UI components in their own separate file.

Changed the drop down arrow to look more like the one in the DateTimePicker.

How to install?

Simply add the DLL to the Visual Studio .NET toolbox. You will see an item named TimePicker at the very end. Just drag and drop this component on your form and you are ready to use the TimePicker.

How it works?

You simply click on the drop down arrow on the right side of the component to set the desired time. You then call the Value property to get that time. I use a TimeSpan to hold the time since the .NET Framework already has a structure to handle time values.

If you want a string representation of your time, you can use the ToString methods implemented in the TimePicker or you can throw back the TimeSpan in a DateTime structure and call its ToString which has a lot of predefined format.

Useful properties

TimePicker has a few interesting properties that I have added. Read the following to know how you can customize the TimePicker the way you want.

ButtonColor

You can choose the color of your choice for the buttons. This color will go on the buttons that are not selected.

Checked

Property that returns the state of the checkbox of the control

Format

A string that is parsed by the TimePicker. The format is responsible for displaying the time in the TimePicker control.

RightToLeft

Change this property if you want the time to be on the right side of your TimePicker.

ShowCheckBox

A boolean value to place a checkbox on the left side of the control. Clicking in the checkbox will enable the rest of the control.

ShowDropDown

A boolean value that makes the arrow on the right side of the component disappear. Since the user can click on the hours or the minutes, some developers might want to hide the drop down arrow.

SelectedColor

You can choose the color of your choice for the buttons that are selected.

Separator

A character is inserted here. Based on the preference of the developer, you can separate the hours from the minutes with any character that you want.

SeparatorColor

Don't confuse this property with Separator, they are not related. SeparatorColor is a color used to separate the hours from the minute in the panel. If you change the colors of the buttons with ButtonColor and SelectedColor, you might want to harmonize the display by choosing a color for the separator.

TimeSelector

An enum that changes the mode of the TimePicker. If you only want the hours to be displayed in the TimePicker, set this property to Hours. If you also want the minutes, select the Minutes value and if you want both, choose HoursAndMinutes. For people who want to use TimePicker to pick seconds, just use the Minutes value and place a label next to it called Seconds.

Value

The Value property is a TimeSpan structure. It holds the time that you have set with the user interface. You can change it with my very own TimePicker interface by clicking on it like in the picture below.

Tips'n'tricks

You can change the Value property with my very own TimePicker. Since the TimePicker is shown in modal mode, you have to click on the separator to hide the form.

Instead of always clicking the drop down arrow, you can click directly the hours or the minutes.

Don't bother to change the format string if you change the separator. My component will update itself when you change a property.

If you only want to see the hours in the TimePicker, change the TimeSelector property to Hours. The same goes for the minutes.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

I'm an early adopter of Test Driven Developpement and Continuous Integration. I worked with tools such as Test Driven .NET, Cruise Control .NET, NAnt, NUnit and NCover. I am involved with the Agile user group in my city. My main area of interest is with lean software development but I do value other methodologies as well.

You can read my blog about lean software. It's mostly in French but I do have a few posts in English.http://blogs.agilequebec.ca/blogs/lpcarignan/default.aspx

I'm always open to job offers. I am open to senior software engineer or achitect positions. If you are looking for someone with my profile, send me an e-mail. I am willing to relocate.

"...who want to use TimePicker to pick seconds, just use the Minutes value and place a label next to it called Seconds". - this doesn't work. I've downloaded demo-project and tried to follow this advice but got no luck.

Hi, first I wanna say, that i'm not really expert, but I'm learning.I was searching for a tool like timepicker to use it in MS Excel 2007. Unfortunaltely I was not able to install/use it in Excel. There was just a "dll" in the demo file. In the source file there was not one. (I tried to use the one in the Demo file, but that did not work, either.Can you help me?With greetingsFloko

Could you tell me what the error was? The dll in the Zip is build with .NET 2.0. Maybe something special is required with Office 2007. Maybe you have to put a reference to an Office dll or put a special method in the TimePicker projet. I haven't done any .NET for Office. I just moved to Framework 3.5.

What about rebuilding the code in VS 2008? Did that work? Can you then put it in a normal .NET project, let's say a Windows Forms project?

I was testing out this control to see if it would work for my app and it was fine until I moved the app over to the second monitor so i could tweak some code. The form shows up all the way to the right on the first window. The vertical position is correct, but not the horizontal.

The answer to your problem may not be the answer to your question. --Me--

Hi!I experienced a problem with the font size in the dropdown menu:The numbers above 9 are not shown completely. There is just the first digit shown.In the demo everythig is fine, though...So I changed the fontsize down to 6, so that I was able to work with it, but thats non-durabale solution i think...Is this problem know to anyone else?

I did notice this problem in the Designer inside VS .NET 2005. I have no clue why it behaves this way. I did put time into investigating this matter. When used in an application (i.e. the demo app), it works fine. It's the same code so it should work. My impression was maybe a different drawing engine is used inside VS .NET.

I did a search on the word "urdu" and found a DateTimePicker and a Textbox for Urdu. Nothing on a TimePicker. My control doesn't show any dates, only times. While I am not familiar with the Urdu language, I would believe time is displayed with arabic numbers. But I could be wrong.

I think that's a good aproach to making it easy to select a time, but, folowing the "Calendar" approach for date picking, a "Clock face" would meet the need for a time picking, don't you think?

In my opinion, a control like yours could bring usability problems: - Users may not instantly learn how to use the control - There are just too many options in the drop down view, and user can become overwhelmed

I know that your work requires a good effort, but the control may be just not good enough to be included in a project, I would rather keep the DateTimePicker option.

Hai,I'm a beginner of ASP.NET 2.0 The .Net TimePicker control is good. But this control is in the previous version of ASP.NET. So, Its little bit tough to understand for me. And I'm also doing small project on Timesheet. Where employees should enter their Start Time, End Time, Break Time.So, if you provide me the code that will be very helpful for my project.So please provide me the code in newer version of it.Thank You in Advance...

My name is Emilia,I'm a C# developer.I've used TimePicker control in my App.Thanks a lot for sharing this control.I have a question:How user can exit from time picker only using keyboard?I could not handle this,would you please help me?Thanks alot

Good question! I never thought about this one. I would recommend adding a delegate to the KeyPress event on each button. I tried adding a delegate to the KeyPress event of the form on which all the buttons reside. No luck! Nothing happens.

So, short answer would be to add the delegate to the KeyPress event of each button. You could then define a default key (the Spacebar comes to mind) to close the picker. You could put more logic to move the focus on a button when a key is pressed. For example, pressing 9 would put the focus on the button named '9' and so on. Maybe a property where you can accept key strokes would be of value.

I am planning on migrating the control to 2.0 and 3.0 this Fall. As always, lots on my plate.