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
43 Comments »
Leave a Reply
I’m a WPF Disciple
I am an insider …. muhhhaaaa
C# Disciple
More PhotosAwards
Vote Me
What about a Date picker? (Time is easy…the Date picker is the one that gives me troubles implementing (properly) )
You can find a DatePicker in my blog over here
http://marlongrech.wordpress.com/2007/09/11/wpf-datepicker/
You can also look at the full List of controls that I have build here
http://marlongrech.wordpress.com/avalon-controls-library/
How about a combination of the date and time pickers?
(I’m actually going to do this now)
(Thanks!!!)
That’s a great idea… If you need some help doing it let me know.. send an email at marlongrech@gmail.com
Hi,
I saw your comments in my blog (http://wpfcontrols.blogspot.com/), if you are interested I could post your controls in my blog..
Let me know
Ta,
Rajeesh
Looks nice, but why cant I get the control to work in 2005? It just wont display?
Can you please send me an email(marlongrech@gmail.com) with the source code that you are using so that I can check what is wrong… Thanks
[...] to build a DateTimePicker. DateTimePicker is nothing really special it is a DatePicker and a TimePicker combined in one [...]
Pingback by WPF Date Time Picker « C# Disciples | February 6, 2008 |
Added support for Min and Max time
http://marlongrech.wordpress.com/2008/03/03/support-for-mindate-and-maxdate-in-datepicker-and-timepicker/
[...] I did a small update to the TimePicker control. I added another Property called CurrentlySelectedTime which can be used to get the current [...]
Pingback by An update to TimePicker control in AvalonsControlLibrary « C h a k s’ C o r n e r | March 12, 2008 |
I am not able to download TimePicker when I click on “Download Source Code” it again displays list of controls instead of download.
you can download from here
http://www.codeplex.com/AvalonControlsLib/Release/ProjectReleases.aspx?ReleaseId=10250
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?
I m wondering if this control can be used for WindowsForms…
if not how to port it ??
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.
hey? can you visit me at quesera.blogsome.com cause i am posting some of my problems in C#, i ask for your comments and help. .
you can download the full source code from
http://www.codeplex.com/AvalonControlsLib
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”,
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!
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
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.
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.
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…:(
This is for WPF not silverlight…. Sorry
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.
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.
Hi, were you able to get a solution to this? I am also looking to use the timepicker in 12 hour format with AM/PM.
You shall provide a way to show Hour and Minute only.
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.
Check out the ressource file. It contains the textboxes for the three input fields.
thant you. Me callo como anillo al dedo.
thanks for excellent control. shall a way to show only Hour and minute only?
Ok cool.
Are you still working on this? Have you fixed those little bugs that these dudes are speaking about?
Is there a Property on this control to change it from a 24-hour to a 12-hour time?
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.
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
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}”
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
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
Super post praises for uploading . I shared it on pinterest|Just linked this to Twitter|Posted this to my LinkedIn, nice read.}