.NET TimePicker - CodeProject

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.

You must Sign In to use this message board.


Per page

Picking seconds doesn't work.
sss_golovko

3:02 13 Mar '09

"...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.
Sign In·View Thread·PermaLink

Re: Picking seconds doesn't work.
Louis-Philippe Carignan

17:54 16 Mar '09

Good you be more specific on what is not working exactly?
Sign In·View Thread·PermaLink

Re: Picking seconds doesn't work.
sss_golovko

9:30 17 Mar '09

The label called Seconds behaves like simple label control: it displays the text from text property and no seconds and picking availability.
Sign In·View Thread·PermaLink

timepicker installation problem
floko

4:49 11 Nov '08

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 greetings Floko
Sign In·View Thread·PermaLink	2.00/5

Re: timepicker installation problem
Louis-Philippe Carignan

2:14 12 Nov '08

Hi Fioko,

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?

Louis

Properly show hours(0-23) and minutes(0-59) in .net2.0 vs2005
SimeonVelichkov

3:59 24 Jun '08

Put this: for (int i = 0; i < this.Controls.Count; i++) { Button btn = this.Controls[i] as Button; if (btn != null) { btn.UseCompatibleTextRendering = true; } } in HourMinuteSelectorForm.cs, HourSelectorForm.cs, MinuteSelectorForm.cs constructors.
Sign In·View Thread·PermaLink

Re: Properly show hours(0-23) and minutes(0-59) in .net2.0 vs2005
ehrenberg

2:41 20 Nov '08

Works! Thank you!
Sign In·View Thread·PermaLink

TimeSpan greater than 24 hours
Michael Kämpf

0:07 7 Apr '08

How to use the TimePicker to allow TimeSpans greater than 24 hours?
Sign In·View Thread·PermaLink

I used listboxes
ndennisv

8:55 27 Jan '08

I used two listboxes side by side on a panel. Set the listboxes to multicolumn and the panel.visible to false until a textbox is clicked.

You'll need to adjust the listboxes width and height to get the column count right.

After the minutes is selected the panel.visible = false.

The code shown here uses two textboxes needed for a start and end time.

Dennis

            bool startclicked = false;

            string[] h = { 
                "00","04","08","12","16","20",
                "01","05","09","13","17","21",
                "02","06","10","14","18","22",
                "03","07","11","15","19","23" };
            string[] m = {    
                "00","10","20","30","40","50",
                "01","11","21","31","41","51",
                "02","12","22","32","42","52",
                "03","13","23","33","43","53",
                "04","14","24","34","44","54",
                "05","15","25","35","45","55",
                "06","16","26","36","46","56",
                "07","17","27","37","47","57",
                "08","18","28","38","48","58",
                "09","19","29","39","49","59" };

            for (int i = 0; i < h.Length; ++i) HourlistBox.Items.Add(h[i]);
            for (int i = 0; i < m.Length; ++i) MinutelistBox.Items.Add(m[i]);

            HourlistBox.ColumnWidth = 30;
            MinutelistBox.ColumnWidth = 30;

        private void StartTimetextBox_Click(object sender, EventArgs e)
        {
            Timepanel.Visible = true;
            startclicked = true;
        }

        private void EndTimetextBox_Click(object sender, EventArgs e)
        {
            Timepanel.Visible = true;
            startclicked = false;
        }

        private void SetHour(object sender, bool wasminute)
        {
            string h = "00";
            try
            {
                h = HourlistBox.SelectedItem.ToString();
            }
            catch { }
            string m = "00";
            try
            {
                m = MinutelistBox.SelectedItem.ToString();
            }
            catch { }
            if(startclicked == true) StartTimetextBox.Text = h + ":" + m;
            else EndTimetextBox.Text = h + ":" + m;
            if (wasminute) Timepanel.Visible = false;
        }

        private void HourlistBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (HourlistBox.SelectedIndex == -1) return;
            SetHour(sender, false);
        }

        private void MinutelistBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            if (MinutelistBox.SelectedIndex == -1) return;
            SetHour(sender, true);
        }

App on Second Monitor Control Paints on First Monitor
lodlaiden

13:12 14 Aug '07

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--
Sign In·View Thread·PermaLink

Fontsize problem
Christoph Herrmann

23:47 1 Jul '07

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? Greeting Christoph
Sign In·View Thread·PermaLink	1.00/5

Re: Fontsize problem
Louis-Philippe Carignan

4:41 2 Jul '07

Hi Christoph, 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. Louis-Philippe Carignan
Sign In·View Thread·PermaLink

Re: Fontsize problem
Christoph Herrmann

5:15 2 Jul '07

Thank You for the answer! I just found the solution: I had CompatibleTextRenderingDefault set to "false": `Application.SetCompatibleTextRenderingDefault(false);` Now, when its "true", everything works fine. (.NET default it is "true", I think.) So it really semms to be a problem with the .NET designer. Not a different drawing engine, but a different way of drawing. Greeting Christoph
Sign In·View Thread·PermaLink	1.00/5

Related TimePicker
Vasudevan Deepak Kumar

0:02 28 Jun '07

There was a related Urdu Timepicker I saw in CP forums. Can be there some move to bring all these under a single umbrella and each language as a configuration directive? Vasudevan Deepak Kumar Personal Homepage Tech Gossips
Sign In·View Thread·PermaLink

Re: Related TimePicker
Louis-Philippe Carignan

13:09 28 Jun '07

Hi, 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. If possible, could you point me to the actual TimePicker in Urdu? Louis-Philippe
Sign In·View Thread·PermaLink

Nice, but....
menenedezpoo

12:21 27 Jun '07

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.

Don't take it personal, it's just a professional point of view.

Very Cool
merlin981

11:52 27 Jun '07

This is a nice way to represent time. Thanks for sharing this. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ I'm paid to surf the web. Are you? I get my developer tools from Merlin A.I. Soft ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Sign In·View Thread·PermaLink	1.00/5

TimePicker - Plz Help Me....
Veesam Suresh Kumar

20:22 11 Jun '07

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...

-- modified at 1:33 Saturday 16th June, 2007

How user can exit from time picker only using keyboard?
Emil1500

21:08 6 May '07

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
Sign In·View Thread·PermaLink	2.00/5

Re: How user can exit from time picker only using keyboard?
Louis-Philippe Carignan

12:13 7 May '07

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.

Re: How user can exit from time picker only using keyboard?
Emil1500

1:23 13 May '07

Thanks a lot,I'll try it.
Sign In·View Thread·PermaLink	2.00/5

Thanks..
upadhyaynidhi

20:59 29 Jan '07

Its really nice.... I have used it in my app. so Thanks nidhi
Sign In·View Thread·PermaLink	2.00/5

Having an issue with control
Deepabh

12:00 24 Mar '06

hi. i m getting an issue. when i m runnin on .net framwork version 1.1 it is working fine.But when i m running under framework version 2.0, the control is not comming properly. only single digit are appearing on the control when drop down is clicked. In case of Hrs for 0-9 on 0 is appearing , for 10-19 only 1 is appearing and 20-24 only 2 is appearing. Similarly for Min. The value selected appears correctly . i hope i m able to put my issue clearly. Whats going wrong ?

Deepabh

Re: Having an issue with control
Olli Nissinen

8:26 11 May '06

I'm facing the same problems. I love the control and I have used this control for a long time with .NET 1.1 and after updating to 2.0 it suddenly doesn't work.

I converted the control to VS2005 and noticed that the forms are just too small, so if you change the font to 7 you can see all the numbers.

But my C# skills are so bad that I couldn't solve other problems I'm facing with this control in VS2005 and build a working dll.

So please if there is someone with some C# skills this control would be usable again with a reasonable amount of work.

Re: Having an issue with control
Rudolf Jan Heijink

8:38 25 Mar '07

I also tried to increase the size of the individual buttons. It did not solve the problem completely. A dsadvantage is that the size of the control increases. I decided not to use it for that reason.
Sign In·View Thread·PermaLink	3.50/5