WPF DatePicker

Posted on by

[New Version of DatePicker available here] 

Here we are again…. this time it is a date picker control…. Yesterday, I couldn’t get any sleep so I decided to
build a sinple date picker control… It is very simple but I think it is very useful to have…
This control has a dependency property named CurrentlySelectedDate that gets updated when ever the use selects a
new date and that’s basically it… wow how nice… 🙂

One cool feature of this control is that it is restyleable… You can create a Control template to completly change

the look of the control… in the demo propeject I create a simple control template to show this feature… for

those of you who want to create a control template and use this control here are the PART names to use

“PART_MonthBack”, Type = ButtonBase, This button is used to navigate back to the previous month
“PART_MonthForward”, Type = ButtonBase, This button is used to navigate back to the previous month
“PART_CurrentlyViewedDate”, Type = ContentControl, This control is not need as such but basically this control
(if set) gets automatically databound to the current Month + Year in view
“PART_Dates”, Type = Selector This control gets populated with the days of the crrently

viewed month….

In the DatePicker I also create 2 converters one to calulcate width for the date cells(CellSizeConverter) and one to gray out the days that are shown in the Selector control but are not in the current month (IsCurrentMonthConverter). feel free to use these as well… to have a better idea how to use these converters have a look at the Generic.XAML file in the AvalonControlsLibrary project under the Themes folder….

Please contact me if you need any help with this control…

See alse DateTimePicker

Regards

Download Full Source code + Demo here…

DatePicker

56 thoughts on “WPF DatePicker”

  3. Hi,
    Do you know why the DatePicker doesnt get shown in the designer but in the compiled executable? And ist there a way to enable Intellisense for the DatePicker?
    Thanks

    Reply

  5. Pingback: Time Picker « C# Disciples

  6. Hello,

    I want to catch the new date when I change the current selected date but I don’t find the associated event.

    Event like “SelectedDateChanged”…

    Could you help me please?

    Thanks

    Reply

  7. Hi there,

    I did not create an event for the selected date… I will make sure to put it on my todo list.

    Yet you can do it any way using DependencyPropertyDescriptor like so

    System.ComponentModel.DependencyPropertyDescriptor s =
    System.ComponentModel.DependencyPropertyDescriptor.FromProperty(DatePicker.CurrentlySelectedDateProperty, typeof(DatePicker));
    s.AddValueChanged(datePicker, delegate
    {
    DateTime newTime = datePicker.CurrentlySelectedDate;
    MessageBox.Show(newTime.ToShortDateString());
    });

    Where “datePicker” is the DatePicker instance you have in the XAML (i.e )

    Hope it helps

    Reply

  11. Sorry, this is the first time I have worked with WPF and needed a datetime picker. What I am in need of knowing is how I can modify the column width/height/color for the datepicker?

    Reply

  12. In order to change the look and feel of the Date Picker you can create your own ControlTemplate… yet if the changes you want to do are small you can go in the Themes/DatePicker.XAML and change the default control template… It is very easy to do this, if you need any help just drop me an email…. Hope it helps…

    Have loads of WPF Fun 🙂

    Reply

  13. Basically I want mine to look like the one you have in the sample at at the top of the screen. Except a different background color. But no matter what I set, the cell spacing never changes and I don’t see a way to change the edging background color from the blue you have.

    Reply

  15. Just a quick question. Is there a simple way to change the default date format? For example, rather that displaying Wednesday, January 30, 2008, I would like to simply display 01/30/2008, or Jan 30, 2008.

    Thanks

    Reply

  16. I added the following to the date time picker control….

    ///
    /// Gets or sets the format to display the date in, using standard
    /// string.Format() styles (i.e. ‘d’, ‘D’, ‘MMM dd, yyyy’, etc).
    ///
    /// The date display format.
    public string DateDisplayFormat
    {
    get { return (string)GetValue(DateDisplayFormatProperty); }
    set { SetValue(DateDisplayFormatProperty, value); }
    }

    ///
    /// Gets or sets the format to display the date in.
    ///
    public static readonly DependencyProperty DateDisplayFormatProperty =
    DependencyProperty.Register(“DateDisplayFormat”, typeof(string), typeof(DatePicker),
    new UIPropertyMetadata(“D”));

    ///
    /// Gets and sets a string that represents the selected date
    ///
    public string CurrentlySelectedDateString
    {
    get { return String.Format(“{0:” + DateDisplayFormat + “}”, CurrentlySelectedDate); }
    }

    Then in code you can go….

    or

    etc

    Reply

    • Hi there,
      I derived from the datepicker control and added the above code and it works HOWEVER there is one problem concerning the MONTHs combobox. It’s empty.
      I used the following formatting: dd-MMM-yyyy
      How can I make sure that the MONTHs combobox is filled ?

      Reply

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

  21. I would like to change the DatePicker to let me choose a range of dates. For example, to click on the first date of the range and then holding the left mouse button while moving to the end date in the range. This action must then populate two date fields (Start date, end date). Is this possible in WPF? I’m quite new to the technology…

    Reply

  22. Hi there,

    This is possible in WPF yet the datepicker does not support it…. I will create a work item on CodePlex and make sure to add this feature in datpicker for AvalonControlsLib v2

    Thanks

    Reply

  24. Hello,

    I created a simple hack for date picker to support ranges… Again this is a hack and not a good implemenation. I will add this feature in the new release of AvalonControlsLibrary v2

    Here is a Demo
    http://www.snapdrive.net/files/496756/Wpf%20Posts/DatePickerDemo.zip

    In order to enable the range selection you have to set the DatesSelectionMode of DatePicker to Extended and a property (of type ObservableCollection<DateTime))called CurrentlySelectedDates will be populated with the range of dates you selected

    If you need any help please let me know
    Regards

    Reply

  26. I am binding the datepicker to an XML form. But I need the ability to set the DateTime to blank if the Date is not required in the report. Any ideas?

    Reply

  27. Hmm…Currently the DatePicker does not support a null date because a Date is a struct so null is not an allowed value. What about setting the visiblity to Hidden when the date is null?

    If you want send me an email with the code and I will try and help you out 🙂

    Reply

  28. Pingback: AvalonControlsLibrary DatePicker refactored « C# Disciples

  31. sure,
    but it had to get the values from another textboxes , that the user entered, the year and the month.
    Thanks!

    Reply

  32. one way to do this would be to do a MultiBinding (for the selected date of the datepicker) with all TextBoxes involved and then do a converter that agreagates the values of all the textboxes and creates a datetime

    Hope this helps

    Reply

  34. I needed a localized date picker so I modified the month list in DateHelper to dynamically retrieve the months from the current culture. The only other thing that I had to change was the MonthConverter in DatePicker. Let me know if you are interested in the code.

    Reply

  36. What is the dependency property that I should use for the DatePicker? I am attempted to bind to a object’s DateTime in C#, but I can’t seem to find the DependencyProperty to use.

    Thanks,
    Erick

    Reply

  37. Let me revise my earlier statement – I set it to the CurrentlySelectedDate DP, but that never seems to get updated. I’ve found with more testing that the actual property isn’t even getting updated. I am on VS 2008 SP1 Beta 1, so that may have an impact?

    Thanks,
    Erick

    Reply

  38. Hi,

    I have few remarks.

    Initially, CurrentlySelectedDate and displayed date are set to DateTime.Now, but corresponding dayCell is not marked as selected when calendar is expanded to select new date.

    When I change month or year in calendar, displayed and CurrentlySelectedDate are not changed. Change of CurrentlySelectedDate and displayed date happens only when I select dayCell.

    Regards,
    Sanja

    Reply

  39. Hi,

    I added

    CurrentlySelectedDate = new DateTime(CurrentlyViewedYear, CurrentlyViewedMonth, CurrentlySelectedDate.Day);

    in ChangeDate() method in DatePicker.cs, so, now CurrentlySelectedDate and displayed date are changed after changing month or year and not only after selecting date.

    One more remark. The list of Months in DateHelper.cs is not correct. Month November is added like “Novemeber” so, if you don’t change that value to correct month name, you will not be able to get that month.

    Regards,
    Sanja

    Reply

  41. Hi,

    I had no time to wait for improved version of DatePicker so I tried to fix this issues by myself. Here are my solutions, maybe that can help to someone while improved version is not released.

    Changing current and displayed date when month or year are changed – at the beginning of ChangeDate() method, I put following code:

    // get last day of currently viewed month
    DateTime newDate = new DateTime(CurrentlyViewedYear, CurrentlyViewedMonth, 1).AddMonths(1).AddDays(-1);

    int day = CurrentlySelectedDate.Day;

    // if new selected month has less days then previous selected, set selected day to last day of new month
    if (day > newDate.Day)
    {
    day = newDate.Day;
    }

    CurrentlySelectedDate = new DateTime(CurrentlyViewedYear, CurrentlyViewedMonth, day);

    When month or year are changed, this method is called, so current date will be changed.

    I also improved condition in DatesListSelectionChanged(), instead if (datesList.SelectedIndex != -1) I put if (datesList.SelectedIndex != -1 && ((DayCell)datesList.SelectedItem).IsInCurrentMonth), so, now date is changed only if days from currently selected month and year are selected. I worked only with SelectionMode.Single.

    Selection of date cell:
    I added new method
    public void SelectDayCell()
    {
    int selIndex = 0;
    foreach (DayCell cell in datesList.Items)
    {
    if (GetDateFromCell(cell).Date.Equals(CurrentlySelectedDate.Date))
    {
    datesList.SelectedIndex = selIndex;
    break;
    }

    selIndex++;
    }
    }

    and call that method at the end of ReBindListOfDays() method, so now, when you open calendar first time, day cell corresponding to CurrentlySelectedDate is selected, when you change month or year, corresponding date cell is selected.

    I think these are all functional improvements by my side. Hope this will be helpful to someone :).

    Regards,
    Sanja

    Reply

  42. Hi,

    I am using your Data Picker in my application. Everythign works fine but I want to know one thing.

    I click on the Data picker and the calendar opens up.Now I select the date from the picker.

    But the calendar doesnt close when once I select the date. However it closes when I click on the page. I want to know how to close the calendar once the date is selected.

    Thanks

    Reply

  43. I will update this in the date picker…. Basically you have to set the IsOpen property of the Popup (which is in the DatePicker control Template) to true once the user select a date

    Reply

  44. Hey, I’m a newbie in WPF and I am trying to create a WPF application using VS 2008. I wanted to use your date picker but I’m not sure how to. I downloaded the “ACL v2” and I ran it. I saw many demo codes. But I just need the DatePicker. How do I use it exactly? Am I correct add it in the assembly??

    Similar to Gopi.. I also want the calendar to close once I selected a date. How can I amend the codes? and which code to amend??

    Thanks in advance

    Reply

  45. Another question.

    Currently the textblock displaying the “CurrentSelectedDate” date is of the long date format. How can I change it to the short date format??

    Thanks in advance

    Reply

  46. I have a little problem:

    I have a little software with some simple controls (for example, this datepicker, and your timepicker) and a Gecko embedded browser.

    When the program starts everything is fine, but if a click into the browser, and then try to pick a date it will open the popup fine but whatever I click it won’t pick a date.

    Maybe it’s my fault, I donno.

    Is this a “not intended feature” ?

    I’m in a hurry (deadlines etc.), so can you please respond as soon as possible ? you can contact me at minoriole@gmail.com

    Thanks in advance

    Reply

  47. have no idea what your issue is all about… Yet I don’t think it’s from the DatePicker….. try another datepicker… the WPF Team created one on codeplex I suggest you try that one…

    Reply

  48. Hi,

    I am using this date picker in my website. evrything is working fine.I click on the Data picker and the calendar opens up.Now I select the date from the picker.

    is there any facility for automatically populated calender on page load without clicking on dtpicker drop down list arrow.?

    Reply

  50. Hi, thx for the DatePicker! It’s really a great component! I have one small question.. When you get the “DatePicker”-popup and you click on a date, the pop-up doesn’t go away, you have to click elsewhere on the form.. Is there a way to bypass this?

    Reply

  51. Hi
    Thank you so much for these controls that I need most of them.
    I have a questions about datetimepicker:
    Is it possible to make style for it? at least the output? as an example can I change the style that instead of showing like this:
    Monday, August, 02, 2010 I will change it to 08/02/10?

    or even more make it inherit the style of my textBoxs or ComboBoxs?

    Thanks

    Reply

  52. Hello, great post!
    How can modify this style resource in order to use it on a WPF Windows app?
    I tried and when you click the button the popup doesn’t shows up!
    Thanks in advance!

    Reply

  53. Hi,

    I have been facing an issue with DatePicker control from long time. When you select any date in date picker control, date part is shown as square gray box around date. if you come back date picker control again and try to select same date it won’t allow you to select.

    Reply

  54. This is one of the best answer so far, I have read online. Just useful information. Very well presented. You made it very simple and understandable. I’ve found some other good articles on DatePicker control in WPF which also explained very well. That posts link are:
    http://www.c-sharpcorner.com/uploadfile/mahesh/wpf-datepicker/

    and

    http://mindstick.com/Articles/454a2e37-a58a-4ecc-bd0e-bff1ba3690d1/?DatePicker%20control%20in%20WPF

    Thanks everyone for post and keep writing.

    Reply

Leave a comment