Time Picker

While posting in the MSDN Forums of WPF, I received a lot of requests to create a TimePicker. So here it is finally, a simple yet extensible TimePicker. This control lets the user select a specific time by enter text in 3 textboxes (Hour, Minutes and Seconds). The user can also increment or decrement the time by pressing the Up and Down keys of the keyboard or even by clicking the up and down buttons that are supplied in the control. To make the user experience better when the user clicks the left or right key the focus of the textboxes changes, for example if the user is in the hours textbox and clicks the left key (if the caret index is at the end of the text) the minute text box will get focus. The Time Picker control also rounds the numbers that the user enter, for example if the user enters “88″ in the hours text box the Time Picker rounds this number to 23 (which is the highest number you can have for the hours textbox)

The Time Picker also supports ControlTemplates. There are 5 parts that you can use in your control template

->PART_Hours. This is the hours textbox you must supply this field so that the TimePicker can hook to the focus events and the text input events to change the time when text is enetered. When using this part the Time Picker will take care of adding the behaviour of focusing the next textbox when the left/right key is enetered etc..

-> PART_Minutes. This is the minutes textbox. This field is also needed for the Time Picker to change the time when text is entered. Again when using this field the time picker will hook to the events to get the behaviour mentioned above for the PART_Hours

-> PART_Seconds. This is the seconds textbox. This field is also needed for the Time Picker to change the time when text is entered. Again when using this field the time picker will hook to the events to get the behaviour mentioned above for the PART_Hours

->PART_IncreaseTime. This is a button that must be supplied to increment the time when the user click the button

->PART_Decrement. This is a button that must be supplied to decrement the time when the user click the button

Again this is a basic implementation of the TimePicker, nothing special but it is a start. I would really appreciate feedback so that I can enhance this control and maybe add some new features…

Feel free to download the code and play around with this control…

See also DatePicker
See alse DateTimePicker

Regards

TimePicker

DOWNLOAD SOURCE CODE

About these ads

44 thoughts on “Time Picker

  1. Pingback: WPF Date Time Picker « C# Disciples

  2. Pingback: An update to TimePicker control in AvalonsControlLibrary « C h a k s’ C o r n e r

  3. I am not able to download TimePicker when I click on “Download Source Code” it again displays list of controls instead of download.

  4. How can I bind a property? I’m experiencing some problems. I bind a timespan but the timespan never gets changed =\

    How can I do it?

  5. If I place the TimePicker control inside a data template it appears to ignore initial values when either set in markup or when data bound; it always uses the current time for its initial value. It does not appear to “subscribe” to change notifications either…meaning if I have a textbox that is bound to the data source/object and change its value, the TimePicker does not update its value when the properties INotifyPropertyChanged event is fired.

  6. There seems to be a possible bug in the time picker that involves moving the cursor to “neighbour” control. For example if you click on the hour textbox so all the text is selected, and type in 18, the hour text is changed to 18, but the cursor is placed between the 1 and 8 instead of setting focus to the minutes. I have narrowed it down to the method that acutally checks the caret index is “AdjustCarretIndexOrMoveToNeighbour”,

  7. Please disregard my previous post as it was an accidental submit.

    There might be a possible bug in the TimePicker control with the cursor being focused to the next “neighbour” textbox. For example if you click in the Hour field so it is all selected then enter the number 18, after entering this in, the cursor should jump to the minutes field but instead the cursor is place between the 1 and 8.

    I have narrowed it down to the method “AdjustCarretIndexOrMoveToNeighbour” and what appears to be happening is the current.CaretIndex is always 0. In the “HoursTextChanged” method, the line ” int hourNum = ValidateAndSetHour(newText);” somehow changes the hours textbox caret index back to 0?

    Thanks!

  8. Hi. I’m new to WPF and looking at this to both learn and be try something useful.

    Question: How can I make it so that the values always show double digits?

    Like “09:30:00″ instead of “9:30:0″ for 9:30 am?

    I’ve looked at the code but there’s so much I don’t understand yet that I just don’t see where the time value gets rendered to the textboxes.

    Thanks.

    • I have managed to do this by applying a convertr to the control parts:
      For example:

      Uses this:

      Public Class Format2NumberConverter
      Implements IValueConverter

      Public Function Convert(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.Convert
      Try
      If IsNumeric(value) Then
      Return String.Format(“{0:00}”, value)
      Else
      Return value
      End If
      Catch ex As Exception
      MessageBox.Show(ex.Message)
      End Try
      Return Nothing
      End Function

      Public Function ConvertBack(ByVal value As Object, ByVal targetType As System.Type, ByVal parameter As Object, ByVal culture As System.Globalization.CultureInfo) As Object Implements System.Windows.Data.IValueConverter.ConvertBack
      If value.ToString().Length = 0 Then
      Return 0
      Else
      Return CInt(value)
      End If
      Throw New System.NotImplementedException()
      End Function
      End Class

  9. Hi
    nice work, but i found sobie bug (?)
    i’m binding dependency property from my class to TimePicker.SelectedTime dep. property. It works fine till i change value in TimePicker control.. this action brokes binding expression.

  10. Hi,
    I needed the Time picker to not have rounded corners so I made the CornerRadius setable. Here’s the code if in case you want to add it back in:
    TimePicker.cs:
    ///
    /// Gets or sets the Corner Radius
    ///
    public CornerRadius CornerRadius
    {
    get { return (CornerRadius)GetValue(CornerRadiusProperty) ; }
    set { SetValue(CornerRadiusProperty, value);}
    }

    ///
    /// Backing store for the Corner Radius minsutes
    ///
    public static readonly DependencyProperty CornerRadiusProperty =
    DependencyProperty.Register(“CornerRadius”, typeof(CornerRadius), typeof(TimePicker),
    new UIPropertyMetadata( new CornerRadius(5, 5, 5, 5),
    delegate(DependencyObject sender, DependencyPropertyChangedEventArgs e)
    {
    TimePicker timePicker = (TimePicker)sender;
    //set the new Corner Radius
    timePicker.CornerRadius = (CornerRadius)e.NewValue;
    }));

    TimePicker.xaml:
    Change line 14
    CornerRadius=”5″
    to
    CornerRadius=”{TemplateBinding BorderBrush}”

    Thats it. The changes appear to work here ok with the limited testing that I’ve done.

    Thanks for the great controls.

  11. hey, i tried adding ur reference into my library, but they say its not compatible with my silverlight application..is there any way around that? i wanna use the time picker u created…:(

  12. Hi, thanks for these nice controls!

    But one question:
    I’m using the TimePicker in my MVVM application but I have the same problems written in comment 13 and 15. Is there a solution to solve the problems? My TimeSpan Property “SelectedTime” in my ViewModel never get changed and the TimePicker always show the current time.

  13. I am new to wpf and dont understand how to apply a control template to the timepicker so it shows 12 hour time with AM/PM. Is this possible? Could anyone provide an example of how to do this? Thanks.

    • Agreed.
      Any ideas on how to completely remove the seconds from the control? Removing all the references from TimePicker.cs does not seem to remove the colon and empty seconds textbox from the control in the UI.

  14. First of all, thank you for sharing this library. I downloaded your library and looked at your example in TimePickerTest. I re-built the DLL in VS 2010. For some reason, when I try to add the TimePicker component to my XAML, the component shows up, except the up/down buttons don’t appear to be visible. If I drag the control, I can see the buttons are there somehow in the background but below the hours, minutes, seconds text boxes. Also, I tried adding an exact copy of the TimePickerTest.xaml into my project and the buttons still do not appear. Have you seen this behavior before?

    • Regarding my previous post, I did figure out the problem. Essentially, I had a button style defined at the application level that was setting the MinHeight property. This was causing the button in the TimePicker control to be rendered below the control.

  15. hi thank you for share this library
    i hava question about this library.i m using mvvm and i cannot bind propery with this component .how can i bind property pls help

  16. I’ve no problem with MVVM.
    If you set Binding Mode and UpdateSourceTrigger property, the component updates correctly the data bound.
    Es.
    SelectedTime=”{Binding Path=TimeAcquisition, Mode=TwoWay, UpdateSourceTrigger=PropertyChanged}”

  17. hi,
    Thank you!!!
    i have used the timepicker control, the same code when i copied and tried in 4,0 frame work i am not able to see the control(the textboxes and buttons). it is working fine when i take i take the dll from u r code. i want to create seppare project with the same code in 2010 and it should work. could u please help me

  18. Hi, Nice work..
    But I have the same problem as someone mention earlier BUT no one answered
    “If I place the TimePicker control inside a data template it appears to ignore initial values when either set in markup or when data bound; it always uses the current time for its initial value.” also data binding does not work!!
    Anyone overcame this issue yet?
    Murshed

    • Hello everyone,
      I found a hack to make it(timepicker) work inside data template. Move the content(time picker and other controls) of the template to a user control. and use the user control inside the template!
      If you didn’t userstand the solution, throw me an email. I will try to elaborate.
      Greetings from Salzburg
      Mushed

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s