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.
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.
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 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.
- 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
- 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
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.
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.
You can choose the color of your choice for the buttons. This color will go on the buttons that are not selected.
Property that returns the state of the checkbox of the control
A string that is parsed by the
TimePicker. The format is responsible for displaying the time in the
Change this property if you want the time to be on the right side of your
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.
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.
You can choose the color of your choice for the buttons that are selected.
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.
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
SelectedColor, you might want to harmonize the display by choosing a color for the separator.
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.
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.
- 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.