.NET TimePicker

• Download demo project - 32.2 KB
• Download source - 41.5 KB

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.