WPF Date Time Picker

Posted on by

[updated 09th Febuary 2008 – Bug fix for DateTimePicker]
After loads of requests for a DateTimePicker in AvalonControlLibrary I finally had sometime to build a DateTimePicker. DateTimePicker is nothing really special it is a DatePicker and a TimePicker combined in one control.

DateTimePicker exposes an important property called DateTimeSelected. DateTimeSelected is a dependency property so that you can use it in data binding. DateTimePicker also exposes an event DateTimeSelectedChanged that is raised whenever the date/time is changed.

There are some other useful properties that you can set to layout this control

MinuteHand – This property takes a Brush and it is used to color the minute hand

HourHand – This property takes a Brush and it is used to color the hour hand

ClockBackground – This property takes a Brush and it is used as Background color for the clock

CalanderHeaderBackground – This property takes a Brush and it is used as Background for the header of the calander

CalanderHeaderForeground – This property takes a Brush and it is used as Foreground for the header text of the calander

This control also supports control templates. You MUST supply a DatePicker named PART_DatePicker and a TimePicker named as PART_TimePicker in order to create a ControlTemplate for this control.

This control will ship in v2 of AvalonControlLibrary. If you have any suggestions or find any bugs please let me know so that I can update it before I release AvalonControlLibrary v2.

Download Demo Project Here

Please note that a new version is available here

DateTimePicker

kick it on DotNetKicks.com

62 thoughts on “WPF Date Time Picker”

  1. Pingback: Time Picker « C# Disciples

  2. Pingback: WPF DatePicker « C# Disciples

  5. This is looking great, Marlon. Thank you!

    I’m wondering if this control supports European weeks starting at Monday, which I’ll probably find out after downloading :).

    For business applications it would also be a great option to display the week number to the left of each week using a specific CultureInfo, CalendarWeekRule and FirstDayOfWeek:

    int weekno = specifiedCultureInfo.Calendar.GetWeekOfYear(dateInWeek, CalendarWeekRule.FirstFourDayWeek, DayOfWeek.Monday)

    Reply

  9. Hello again, Marlon.

    Just in case you consider adding support week numbers:

    I just discovered that FirstFourDayWeekRule
    and the GetWeekOfYear method is broken and does not produce
    week numbers according to ISO 8601.

    Maybe a function to produce the correct week numbers could be passed to the control.

    Reply

  11. Hello everyone,

    While refactoring code for DateTimePicker and making Routed events for time picker and datepicker, I found a major bug in the DateTimePicker control. The bug is basically when you set the date time manually the time is not set correctly! Thanks to the unit tests this was detected while I was refactoing the control and now it should be fixed. I uploaded the new version of the control. Sorry for any inconvience.

    Regards

    Reply

    • Hey, .. Thanks for the control. But I don’t see how can I manually through code set time on the control .. by reading values from the database?

      Thank you in advance.

      Reply

    • Hi,

      I am trying to bind the datetimepicker control using wpf binding and the time does not seem to get updated. Also I observed that once the datetime is bound and if there is a rebinding( I am using the same usercontrol to bind another record) it doesnot get refresh.

      Regards

      Reply

      • Thanks for the control.

        I was using the following
        DateTimeSelected=”{Binding Path=EventHappenedDateTime}”
        The time was not getting reflected. It failed to refresh when I moved from one record to other.

        So I tried this EventHappenedDateTimePicker.DateTimeSelected = Model.SelectedItemHistory.EventHappenedDateTime;

        The time is not getting reflected the first time but then it worked fine when I moved from one record to other.

      • Hi,

        I was able to figure out the issue and is the following part of the code.

        public override void OnApplyTemplate()
        {
        …….

        datePicker.SelectedDateChanged += delegate{ SetCurrentDateTime(); };
        timePicker.SelectedTimeChanged += delegate { SetCurrentDateTime(); };
        datePicker.CurrentlySelectedDate = DateTimeSelected;
        timePicker.SelectedTime = DateTimeSelected.TimeOfDay;

        ……
        }
        When the following code is the executed it fires the event SetCurrentDateTime().
        datePicker.CurrentlySelectedDate = DateTimeSelected;

        SetCurrentDateTime() assigns the new date and current time(Datetime.Now)
        private void SetCurrentDateTime()
        {
        if (!isDateTimeBeingUpdated)
        {
        DateTimeSelected = new DateTime(
        datePicker.CurrentlySelectedDate.Year, datePicker.CurrentlySelectedDate.Month, datePicker.CurrentlySelectedDate.Day,
        timePicker.SelectedHour, timePicker.SelectedMinute, timePicker.SelectedSecond
        );
        }
        }

        If you move the code timePicker.SelectedTime = DateTimeSelected.TimeOfDay;
        above
        datePicker.CurrentlySelectedDate = DateTimeSelected;
        then it will have the new time and Now date.

        I just reordered the steps where assignment of datetime comes before the assignment of events as the following and the code works fine.

        timePicker.SelectedTime = DateTimeSelected.TimeOfDay;
        datePicker.CurrentlySelectedDate = DateTimeSelected.Date;
        datePicker.SelectedDateChanged += delegate{ SetCurrentDateTime(); };
        timePicker.SelectedTimeChanged += delegate { SetCurrentDateTime(); };

        Let me know if this is fine.

        Regards,

        Stevan

  12. I can’t seem to get this to work in an XBAP application (the control doesn’t appear at all). Do you know of any way to get this to work in an XBAP or is it not possible b/c of the sandbox… thanks –

    Reply

  14. yes, i tried building it in both 05 and 08 and i’m running 3.5 framework. I’m also building it as a ‘full trust application’ according to the property settings. The page loads fine with no errors – just the control is invisible/blank (i can still see the text box controls though). I’ve seen this with other controls also – could it be because the control has ‘popup’ markups? i’ve read something about this in other forums… Thanks for the help

    Reply

  15. figured out the issue – i was trying to create a UserControl from your project and my project name was different from yours. In your Generic.xaml you had the project name listed in your code:

    just changed the ‘DateTimePickerDemo’ to my project name and everything is good now.

    Thanks for the great component!

    Reply

  18. I use this control and it works fine for english culture. Please can u tell me how can I make it work for other cultures like de-DE at run time? Thanks

    Reply

  19. Is it posible to navigate through the control just with keyboard? To spring from month’s field to year’s to day’s … It should be used on a tv with a remote control.

    Is there any method to get the popUp open when the control
    gets the keyboard focus?

    Thanks!

    Reply

  22. Hi,

    i just found how to bind to a textbox…
    I wanted to bind it to da row of a dataset where the datetime may be null…

    If this is not possible i need to know how to display no date… Can you tell me how i can do this?

    Reply

  23. Hi there,

    There is no feature in the current version of the date picker to display no date…. I would suggest that you disable the datepicker control when the date is null… You can do this via a trigger or converter…. If you want send me an email and I can send you a sample or something…

    Regards

    Reply

  24. (1) i want to manualy enter date instead of selecting with mouse, how is it possible?
    (2) how can i change the background on keyboard focus?

    Reply

  25. I want to highlight current date and time when
    date time control first time drop down.
    Once we select date, then it highlights that date
    when it is drop down but i want to highlight current
    date when it is first time drop down.

    Please help me if you have any ideas

    Thank You
    Sanjay L. Dholakiya

    Reply

  27. Hi,

    I want the combobox textbox editable so that the user can edit the date directly without opening the combobox, how can this be done.

    Reply

  31. Hi, nice control
    I just expected the time to be editable by dragging the niddles on the watch too :p
    That would be a cool feature to use with a stylus, as I’m developping apps for TabletPC!
    Also, The dropdown with the month has an error, the November is spelled Novemeber, and that throws an exception when you choose it directly.
    Regards,

    Stéphane

    Reply

  32. Just a newbie learning, SHOCKED at the ease I was able to use Avalon Controls(DateTimePicker)Clicked on Designer inVS2008 Express , hit General area in toolbox “Choose Items…”, browsed to Avalon ,still on desktop & away we Go ! Dayum !
    THANKZ Pal, NOT one word of code just dragged onto the form,
    ( Like I said, a newbie !) Thankz again, been Googleing for hours for help !
    BLESS YOU !!!!!

    Reply

  33. Hi!

    Nice work. Any plans to do support for multi-month display (show 2 or more months at the same time)? We are searching for a datetime control that has support for that.

    Reply

  34. Hi there,

    Right now the DatePicker does not support, showing multiple months at the same time yet it can be refactored to do so quite easily…. If you need any help doing this email me and I will help 😀

    Regards

    Reply

    • Hi-

      I am trying to implement the functionality of showing 3 months at a time when I enter a date in the DatePickerTextBox and the dropdown calendar control showing 3 months. For example, if I enter the date as 04/08/2011, the calendar control dropdown should show the previous month, current month and next month like March, April and May or atleast the current month, next 2 months like April, May and June.

      I appreciate the help.

      Thanks,

      Vijay.

      Reply

  35. hi, i am new to wpf and i was looking for a datepicker. i tried to use yours but when i choose month November give’s error and in the list box with the months it’s shows ‘Novemeber’ and say’s cannot find the month

    i am using vs 2008
    any ideas?

    regards from Athens, Greece

    Reply

  36. The missing november (showing up any day now) was a sinple typy in DateHelper.cs change: Novemeber -> November.

    Multi-month is a nice feature. Ususally see this not wep pages.

    Would also be nice to have internationalization support.
    Could add a simple interface for Date/Month names we can replace with own code (We use custom internationalization, not standard WPF).
    Ditlef

    Reply

  37. This is extremely visually appealing. The only thing I would really suggest is to maybe include an OK and CANCEL. The reason for that is if you first change the date, then the picker collapses after date selection and you have to reinstitute the picker to change the time. There were other things I noticed that led me to think this functionality would be nice (ie: click on the GUI clock and the picker collapses), but like I said very nicely done.

    Reply

  40. Hi,

    After choosing month->day the control don’t want to roll-back, and I have to click on it to close editing (choosing) mode. Any idea hov to close this feature after clicking a day?

    Best regards

    Reply

  41. hi,

    The control looks good but I can’t get it to work in my application. (works fine in the demo)
    It doesn’t display the date-time selected at all, both in the header form and expanded. Controls seem to work exept that no information appears to be stored.

    Any ideas?

    I’m new to WPF so it is likely to be something stupid and simple…

    Thanks in advance

    Reply

  42. Hi,

    Great effort here to produce a viable datetime picker. It’s ridiculous that it has not yet been produced by the WPF team, but that’s just me being picky.

    I have one question though: how do I make the control editable? I mean, the textbox of the combobox that stays visible, how do i make it editable?

    Thank you

    Reply

  43. Good Control, But when I choose the month November it shows error. And also Spell mistake in November it shows Novemeber

    Reply

  49. DateTimep.DateTimeSelected = DateTime.Parse(“25.01.2010 17:37:10”);

    In this Row:
    dateTimePicker.datePicker.CurrentlySelectedDate = dateTimePicker.DateTimeSelected;

    Exception: Der Objektverweis wurde nicht auf eine Objektinstanz festgelegt.

    Reply

  50. Hi,

    I am new to WPF and i am trying to use DateTimePicker to a field in a a dataset. How do you bind DateTimePicker in XAML within a datacontext?

    Thanks

    Reply

  51. Thanks. Very nice work. It is also quite simple to introduce firstdayofweek.
    All one needs is to move days in ReBindListOfDays() method, e.g:
    int numberOfDaysFromPreviousMonth = (int)DateHelper.GetDayOfWeek(currentlyViewedYear, currentlyViewedMonth, 1) – datefirst;
    numberOfDaysFromPreviousMonth = (7+numberOfDaysFromPreviousMonth) % 7;
    And similar for numberOfDaysFromNextMonth.

    Reply

  52. Having troubles setting the datetime on startup. I have the DateTimeSelected bound to my StartTime, note if I change this to a TextBox and bind to text it works as expected, I get local time when it loads instead of the StartTime value. Any help would be greatly appreciated.

    Here is the property,

    ”’
    ”’ Start Time of the Audio
    ”’
    ”’
    ”’
    ”’
    Public Property StartTime() As Date
    Get
    Return mStartTime
    End Get
    Set(ByVal value As Date)
    mStartTime = value
    NotifyPropertyChanged(“StartTime”)
    End Set
    End Property

    Dave

    Reply

  53. Hi,
    Thanks for the great DateTimePicker control.
    I am trying to use the DateTimePicker in my WPF Datagrid.
    I used the following code:

    The problem is that it helps me select a date and when i move away to the next column it does not display the date.
    But when i come back and click on the date it shows the selected date.How can i resolve this behavior ?

    Reply

  56. How do you set the displayed format, i.e. what is shown on the top level combo box for the selected date. for this control, the default seems to be mm/dd/yyyy hh:mm, what I require is dd/mm/yyyy.

    Reply

Leave a comment