There are lots of ways to ask for a date [Creating custom DatePicker/TimePicker experiences is easy with the Windows Phone Toolkit]

This blog has moved to a new location and comments have been disabled.

All old posts, new posts, and comments can be found on The blog of

See you there!

Comments (40)
  1. CACuzcatlan says:

    I downloaded the source to the Toolkit and customized the DatePicker page. I only changed colors, not layout or functionality. I want to use my updating color scheme, so I imported the customized page to my project. However, I ran into various problems getting it to compile because of namespace conflicts. Is there an easy way to import my updated page, but keep using the tookit code to control the page?

  2. David Anson says:


    Yours sounds like the same scenario I demonstrate in this blog post and in the associated sample application I link to above. Using the process I outline here, there's no need to download the Toolkit source code or recompile it – customizing the DatePicker/TimePicker popup page can be done completely externally.

    If you don't think that will work for your scenario, could you please explain exactly what it is you're trying to do and why?


  3. CACuzcatlan says:

    Thanks for the quick response.

    I want to use the default date picker page (the one with the scroll selectors, shown in the first image near the top of this blog entry). However, I want to change the colors to match our app. There doesn't seem to be a way to template the page. I downloaded the Phone Toolkit source code and updated the colors to match what I need, but when I import the updated page and code behind to my project. It doesn't compile because the code behind tries to access methods my project doesn't have access to. If I import everything in the DateTimePickers folder in the Microsoft.Phone.Controls.Toolkit project, I get an error saying "conflicts with the imported type".

    I haven't tried it yet, but it seems the only way to use my updates to the default picker page is to import everything in the DateTimePickers folder and change all the object names so they don't conflict. It seems like disproportionate amount of work for changing 3 colors in the default picker page.

  4. David Anson says:


    Thanks – I think I understand your scenario now. πŸ™‚ What I'd expect is that you can take just DatePickerPage.xaml, DatePickerPage.xaml.cs, and DateTimePickerPageBase.cs and put them in your own project. You will need to change the name or namespace for all three to avoid conflicting with the existing classes in the Toolkit assembly, but that should be fairly easy (FYI, I'd recommend changing the namespace). As I recall right now, these classes are self-contained and don't reference any internal/inaccessible properties, so this *should* be fairly straightforward to do. I haven't tried it myself, but that's my expectation – it sounds like you were on the right track, and just grabbed a few too many files. πŸ™‚

  5. CACuzcatlan says:


    I just tried your suggestion of adding DatePickerPage.xaml, DatePickerPage.xaml.cs, and DateTimePickerPageBase.cs. I had to change the names and namespaces. However, I'm still not able to compile. The biggest issue is that it can't access the DataSource.cs file, which includes the DataSource abstract class and a few classes that implement it. There are also a few other compile errors, but this is the main one that is holding me up right now.

  6. CACuzcatlan says:

    It seems that since a modifier is not declared for the DataSource class, it has protected access and I can't use it from my code since I'm not in the same assembly. I'm gonna try moving DataSource to my project and changing the name/namespace, but I get the feeling I'm gonna end up with cascading issues and will eventually have everything in the DateTimePickers folder in my project. If you find a way to customize the DatePickerPage.xaml without all this overhead, please let me know. Thanks.

  7. David Anson says:


    It looks to me like DataSource.cs should not pull in any additional dependencies. Fingers crossed! πŸ™‚

  8. CACuzcatlan says:

    Ok, here's the latest. I got it to compile by adding DatePickerPage.xaml, DatePickerPage.xaml.cs, and DataSource.cs! In the end, I didn't have to change namespaces on those classes. However, I'm running into a runtime exception at line 45 of DataSource.cs. I'm getting a InvalidCastException when it calls "handler" on line 45. I've refactored my code locally and found that the error is not caused when creating a new SelectionChangedEventArgs object. The handler() function is a delegate that points to a function in LoopingSelector.cs, so I can't step into it to determine where the exact error occurs. As far as I can tell, there is no different between the objects in my local version vs. debugging the Silverlight toolkit (which works correctly). I'm need to take a break from this issue, as I've been working on it all day. I'll keep checking the comments to see if there any other developments. I like the idea of being able to customize the date picker through building your own page, but I'm disappointed at how difficult it is to make simple changes to the default version of the date picker page.

  9. David Anson says:


    Sorry for the trouble!

    I've played with this a bit just now and I agree there really doesn't seem to be an easy way to do this kind of thing. (The InvalidCastException ends up being because there get to be two kinds of DataSource in the system and it's not possible to cast from one to the other as happens in DateTimePickerPageBase.cs if it's not included in the project.) This scenario is clearly *possible* – it's just not easy as things are right now. πŸ™ If the DataSource classes were public, it would be simply a matter of adding DatePickerPage.xaml(.cs) to your project, it seems – but it didn't feel right to expose them from the Toolkit assembly since they're really only relevant here and not part of a public API…

    What you might consider instead – and which should be quite easy – is to take the leap to compiling your own version of the Toolkit assembly. Instead of pulling out files here and there, just incorporate the *entire* Toolkit assembly into your solution in source form, delete the existing Toolkit reference, and add a project reference to the private copy. After that, you can modify anything you want in-place and not need to worry about any of the stuff that's getting in the way here. A side benefit is that you'll be able to debug into Toolkit code should the need arise. πŸ™‚ I know a lot of customers take this approach and it has some pretty compelling reasons (once you get past the initial idea of absorbing that much external code).

    Hope this helps!

  10. cwforwinpho7 says:


    I have downloaded and installed the Toolkit and I am having a problem with the DatePicker.  Everything seems to be working great (I even got the check and cancel .png icons to appear properly!) but the Done and Cancel buttons do not actually trigger anything.  They float up when I click on them, but the page does not go back to the host page.  I have to click on the physical back button on the phone in order to get out of the DatePicker page.  I am doing this in the emulator on Windows 7, 64-bit, if it matters.  If I click that physical back button, the host page does not have the date value changed.  So it seems that the event itself is not firing when I click on those buttons.  Has anyone else experienced this problem?

  11. cwforwinpho7 says:

    More info… I have also tried using the ValueChanged attribute in the xaml file and also created a code-behind sub that handles the EventChanged event.  Still nothing happens when I click on the Done button or the Cancel button. Help!

  12. David Anson says:


    Sorry for the trouble – please have a look at the last few notes in this post:…/pining-for-windows-phone-7-controls-we-got-ya-covered-announcing-the-first-release-of-the-silverlight-for-windows-phone-toolkit.aspx What I suspect is happening is that you (or some component you're using) are overriding the navigation events in your application and cancelling them sometimes. DatePicker/TimePicker use the navigation system to bring up and dismiss their "popup" pages, and cancelling those events (or interfering with them) *will* break things.

    If you want to be extra sure, please try the "done"/"cancel" buttons in the sample application that comes with this post or the referenced post – I think you'll find they work okay in isolation.

    Hope this helps!

  13. cwforwinpho7 says:

    Hi Delay,

    Thanks for the help, I think I'm getting close!  I created a new test app and the datepicker and the done/cancel buttons work great in that app.  Wow, those are some very nice effects, I might add…  But what could be causing the problem in my main app?  I will keep trying to isolate various things, but I just don't know what types of things I should be looking for.  I am not using any crazy controls in my app, and I am not (that I am aware of anyway) overriding any NavigationService events.  Any more clues that come to mind?

  14. cwforwinpho7 says:

    Okay, I figured out this problem.  I am doing a CameraCaptureTask, and it was in the Completed handler that I was doing the NavigationService.Navigate to get to my page that had the DatePicker on it.  It seems that there is something special about the CameraCaptureTask that was hindering the navigation of the DatePicker.  I re-wrote this to fire 10 ms after the Completed handler function completes, and now it works!

    One more problem, however, and hopefully this is a more straightforward issue.  When I use the DatePicker and select a date and then click the (now working) Done button, the navigation goes back to my first page, but the values that I had entered into the controls on that page are lost as the page actually loads again.  It is like the DatePicker is doing the Silverlight equivalent of a Response.Redirect rather than just a javascript.back while setting the value of the DatePicker control.  How can I either maintain the state of the first page perfectly and then recall it, or else how can I make the DatePicker control have a lighter touch so that it does not make the first page refresh?  I would prefer the latter approach as it seems to be the correct way that the DatePicker should work in my mind.

  15. cwforwinpho7 says:

    Nevermiiiiiind…  I was using the Page_Loaded event for things that I can move to the Sub New event instead.  It seems that the Sub New is only called when I first navigate to my page, whereas when the DatePicker returns to it that event is not fired, though the Page_Loaded event is.  Whatevah!  Thanks for listening.

  16. David Anson says:


    πŸ™‚ Glad you got this sorted out!

  17. Jobi says:

    I would like to know how we can customize time picker to create an inline Hour:Minute picker. What I want to get is a Time span not the real time. or if you can provide the trick to remove the AM/PM out of the expanded TimePicker control will be helpful

  18. David Anson says:


    You can definitely create a custom IDateTimePickerPage implementation that doesn't show the AM/PM selector – in fact, that's pretty much what you'll *already* see if you change your Phone's clock settings to 24-hour or you live outside the United States. πŸ™‚ But if you're trying to create an actual TimeSpanPicker control, it may not be completely appropriate to start from a TimePicker control – though you're welcome to borrow as much or as little of the DateTimePicker implementation as you'd like!

  19. vignesh says:

    Hi Delay,

    In datepicker control get date from database and set value in PhoneApplicationPage_Loaded method. once i try to change date in picker it's show same date in picker because once again conrol load so is call PhoneApplicationPage_loaded

    I try so catch value in datepicker_ValueChanged no use.

  20. David Anson says:


    The second Loaded event is an unfortunate consequence of the Navigation-based (vs. Popup-based) implementation we needed to use for DatePicker and TimePicker in order to work around the lack of hardware acceleration in Popups on Windows Phone. You'll probably want to modify your application to figure out whether it's in the "first time loaded" case or the "loaded because someone just picked a date" case and not overwrite the chosen date in the second one. I know of someone else who ran into this same problem and worked around it successfully by doing exactly that.

    Hope this helps!

    PS – More info on the Navigation-based approach and some of its implications:…/pining-for-windows-phone-7-controls-we-got-ya-covered-announcing-the-first-release-of-the-silverlight-for-windows-phone-toolkit.aspx

  21. Mister Goodcat says:

    Hi Delay,

    is there a way to open the date picker page programmatically? The scenario is: In my UI the selected date is visualized by an image. Until the user has selected a date, a placeholder is shown. The problem is that I found most people try to tap the placeholder to select a date instead of the (much less striking) date picker control. So the idea was to "route" the tap on the image to the date picker and show the picker page.

    Unfortunately I'm stuck with this. I tried to create an automation peer for the date picker, which does not seem to work, and using a reflection hack also got me nowhere, because the required methods are private. Any ideas?

    Thank you very much,


  22. Mister Goodcat says:

    I found a working hack/workaround for the moment by traversing the visual tree to find the "DateTimeButton" template part and create the automation peer for that button instead. Not pretty though :-).

  23. David Anson says:

    Mister Goodcat,

    I'm glad to hear you found something that'll work! πŸ™‚ The alternative would be to expose something like an IsOpen property on DatePicker for scenarios like this. That's on the TODO list, but not present in Toolkit today. However, I don't think it would be overly difficult to add – perhaps that would be worth considering if you're not completely happy with your AutomationPeer approach?

    Thanks for the feedback!

  24. Mister Goodcat says:

    Thank you for the quick reply!

    I agree that it would not have been difficult to add it to the original code. The reason I didn't go that road was that I wanted to use the the toolkit as-is, and keep the efforts to upgrade when the next release is published at a minimum.

    It's nice to see that you listen to people's feedback and provide such an excellent support. Thank you again.

    – Peter

  25. David Anson says:

    Mister Goodcat,

    Thanks for the kind words! I totally understand your desire not to get into the business of customizing the Toolkit code if you don't need to – for now, I think your AutomationPeer approach is a pretty clever/elegant solution. πŸ™‚

  26. kook80 says:

    is there any way to define the minutes interval for the timepicker ? e.g. to 15 minutes ?

  27. David Anson says:


    By default, no – but it would be an easy change to make to the MinuteDataSource class (in DataSource.cs) if you don't mind tweaking the Toolkit source code! πŸ™‚

  28. Hello,

    FYI I just added the TimeSpanPicker to the toolkit by making the DateTimePickerBase generic (i.e DateTimePickerBase<T>).

    You can also specify a maximum value and an increment step, you can download it here :…/un-timespanpicker-pour-le-toolkit-windows-phone-7.aspx

    Hope it helps

  29. David Anson says:

    StΓ©phanie Hertrich,

    Neat, thanks! πŸ™‚

  30. David says:

    What I'd like to do is have an interim page like the one you show here, except with an additional button for "custom".  Then if the user clicks "custom" it opens the familiar scrolling date picker page that the DatePicker usually uses.  Is that sort of thing possible?

  31. David Anson says:


    Yes, it seems like it should be possible – the picker page ought be able to navigate to another page without a problem. It might turn out that there's a *slight* tweak to the core DatePicker code that's necessary to make this work, but I'm not thinking it would be any more complicated than that. If all else fails, the picker page should always be able to put up a full-screen Popup to simulate an additional page navigation.

    If you try this, I'd love to hear how it works out! πŸ™‚

  32. KevinUK says:

    Hi, how would you set a minimum allowable date?

    In my scenario the user will never need to select a year less than 10 years ago so I would like the year section of the UI to stop scrolling once it reaches the year 2000.


  33. David Anson says:


    At present, doing what you want would involve tweaking the code for the default DatePickerPage to use different end-points. But I think there is (or should be!) a work item on CodePlex to add MinimumDate/MaximumDate properties to the DatePicker control to make it easy to do what you're asking in a more general manner.

  34. KevinUK says:

    Ah OK, I'll keep an eye out for more updates.

  35. louis says:

    HI ,

    regarding about the datepicker. i need to add days but my scenario is user got to click the date they choose and "AddDays(+15)" .

    E.g. User choose 29/12/2010 from the datepicker and the output will be 14/1/2011 from a textbox that i created..

  36. David Anson says:


    What you're talking about sounds like the default experience tweaked slightly to modify the date that's been chosen. Alternatively, you could hook up to the DatePicker.ValueChanged event and increase the value there whenever it changes – just be sure not to get caught in a loop by updating the updated value! πŸ™‚

    Hope this helps!

  37. Troy says:

    After reading for about two hours I realize the datepicker control requires rocket science to use. I like probably most others need to launch the picker from another framework element besides the textbox. Yes, I used the automation framework <shutter>. Tip: You can't make that textbox visibility collapsed or the farmework part can't be found you must make it maxHeight=0; I wanted to hide the day selection from the picker exactly like the built in calendar control does. You would think there would be an enum on the control to allow you to show any combination

    of the controls to allow for year only control, month only control etc…based on what I read here you can't do that without recompiling the entire toolkit??? Do I have this right? You can't even change the colors of the original? You also need to make a directory in your solution and pull in the icons for the picker popup. Please tell me I'm wrong on some of this.  

  38. David Anson says:


    Sorry for the difficulty! DatePicker is definitely one of the more challenging controlsto use  – largely due to the weird way it creats its pseudo-popup. Unfortunately, there wasn't a lot of choice there because the Windows Phone 7 platform's performance with a real Popup control was so poor. πŸ™ For more background on that:…/pining-for-windows-phone-7-controls-we-got-ya-covered-announcing-the-first-release-of-the-silverlight-for-windows-phone-toolkit.aspx

    The Silverlight Templating story is quite powerful and would allow you to do most of the customizations you're talking about, but DatePicker isn't able to take much advantage of it because of the Popup performance issue (again).

    Regarding the need to create a directory for icons in your own application, this is due to a different platform limitation – the fact that Application Bar icons *must* be compiled as Content but things compiled as Content can't be included inside an assembly (such as the Toolkit assembly). If the Windows Phone 7 platform supported accessing Application Bar icons as Resource or Embedded Resource, we would have done that instead which would have avoided the need for the developer to manage them separately.

    DatePicker ended up how it is largely as a result of necessary compromises – I'm hopeful that it will get easier to use in future versions of the phone. Thanks for sticking with it! πŸ™‚

  39. satish says:

    hii David,Could you please guide me how to change background color of datepicker full page…plz plz thanjs in advance…my mail

  40. David Anson says:


    Changing the Background property of the PhoneApplicationPage in the example above should do what you want.

Comments are closed.

Skip to main content