65.9K
CodeProject is changing. Read more.
Home

Time Picker

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.81/5 (8 votes)

Mar 19, 2011

CPOL

2 min read

viewsIcon

81070

downloadIcon

5172

A time picker user control that allows the selection of hours, minutes, seconds and crucially milliseconds!!

Introduction

My code is very simple. It is a user control that does a very similar thing to the standard DateTimePicker however, it is solely a time picker but, unlike DateTimePicker, it allows the user to set milliseconds, not just hours, minutes and seconds.

Background

I am developing a sound player (of sorts) and found the need to have a time picker that could select hours, minutes, seconds and milliseconds but found that the DateTimePicker couldn't do milliseconds. After asking on the CP Q/A forum if any control existed to do what I wanted, I found the answer came back in the negative. So, here is what I have produced to fill my need and hopefully, that of many other people.

Using the Code

The code is very simple using only a text box in the user control. To use it in your application, simply:

  1. Add the TimePicker control to your project.
  2. Rename the TimePickerDemo namespace in the TimePicker.cs and TimePicker.desginer.cs files to your project's namespace.
  3. Add a TimePicker control to a form.
  4. Use the control's OnValueChanged event and Value member to get the time selected by the user. The Value is stored as a TimeSpan.

The control has several useful members; Hours; Minutes; Seconds; Milliseconds and Value which allow you to get and set the time in the time picker. The Value member is a TimeSpan where the Days part is ignored. The code itself is very simple and so I will only demonstrate a small part of it below. The code handles several events in the following ways:

  • LostFocus - The control has lost the focus so the value in it should be what the user wants so format it to make sure.
  • KeyDown - The user has pressed a key. The accepted keys are numeric keys or arrow keys. Left/right arrow keys switch which part of the time is being edited and the up/down arrow keys increment or decrement the part being edited. Parts are hours, minutes, etc.
  • Click - The user has clicked on a part of the control and so has changed the current part being edited. Update the textbox selection accordingly.
  • TextChanged - This is used only to format the text in the text box when the user types an accepted key.

There isn't much to say about the code in this control, it's simple and fairly boring/trivial and warrants only the explanation given. Therefore below I have placed a sample of the FormatText, SetText and SelectCorrectText methods which are the two key methods in this class.

Format Text and Set Text

string[] Parts = TheTimeBox.Text.Trim().Split(":".ToCharArray());

int Hours = 0;
if (!int.TryParse(Parts[0], out Hours))
{
    Hours = 0;
}
if (Hours >= 24)
{
    Hours = 0;
}

int Minutes = 0;
if (!int.TryParse(Parts[1], out Minutes))
{
    Minutes = 0;
}
if (Minutes >= 60)
{
    Minutes = 0;
}

string[] SecondParts = Parts[2].Split(".".ToCharArray());

int Seconds = 0;
if (!int.TryParse(SecondParts[0], out Seconds))
{
    Seconds = 0;
}
if (Seconds >= 60)
{
    Seconds = 0;
}

int Milliseconds = 0;
if (!int.TryParse(SecondParts[1], out Milliseconds))
{
    Milliseconds = 0;
}
if (Milliseconds >= 1000)
{
    Milliseconds = 0;
}

SetText(Hours.ToString("D2"),Minutes.ToString("D2"), 
	Seconds.ToString("D2"), Milliseconds.ToString("D3"));
if (OnValueChanged != null)
{
    OnValueChanged.Invoke(null, new EventArgs());
}

Set Text

private void SetText(string Hour, string Minute, string Second, string Millisecond)
{
      int SelectedIndex = TheTimeBox.SelectionStart;
      TheTimeBox.Text = Hour + ":" + Minute + ":" + Second + "." + Millisecond;
      SelectedIndex = SelectedIndex > TheTimeBox.Text.Length ? 
			TheTimeBox.Text.Length : SelectedIndex;
      SelectCorrectText(SelectedIndex);
      if (!DoingFormatting)
      {
      	DoingFormatting = true;
         FormatText();
         DoingFormatting = false;
      }
}

Select Correct Text

private void SelectCorrectText(int SelectedIndex)
{
      if (SelectedIndex <= 2)
      {
	 TheTimeBox.Select(0, 2);
      }
      else if (SelectedIndex <= 5)
      {
          TheTimeBox.Select(3, 2);
      }
      else if (SelectedIndex <= 8)
      {
          TheTimeBox.Select(6, 2);
      }
      else
     {
          TheTimeBox.Select(9, 3);
     }
}

History

  • 19th March, 2011: Initial version