Freigeben über


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 dlaa.me.

See you there!

Comments

  • Anonymous
    October 26, 2010
    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?

  • Anonymous
    October 26, 2010
    CACuzcatlan, 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? Thanks!

  • Anonymous
    October 26, 2010
    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.

  • Anonymous
    October 26, 2010
    CACuzcatlan, 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. :)

  • Anonymous
    October 26, 2010
    Delay, 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.

  • Anonymous
    October 26, 2010
    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.

  • Anonymous
    October 26, 2010
    CACuzcatlan, It looks to me like DataSource.cs should not pull in any additional dependencies. Fingers crossed! :)

  • Anonymous
    October 26, 2010
    The comment has been removed

  • Anonymous
    October 26, 2010
    CACuzcatlan, 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!

  • Anonymous
    November 01, 2010
    Hello, 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?

  • Anonymous
    November 01, 2010
    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!

  • Anonymous
    November 01, 2010
    The comment has been removed

  • Anonymous
    November 01, 2010
    The comment has been removed

  • Anonymous
    November 01, 2010
    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.

  • Anonymous
    November 01, 2010
    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.

  • Anonymous
    November 01, 2010
    cwforwinpho7, :) Glad you got this sorted out!

  • Anonymous
    November 02, 2010
    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

  • Anonymous
    November 03, 2010
    Jobi, 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!

  • Anonymous
    November 09, 2010
    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.

  • Anonymous
    November 09, 2010
    vignesh, 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: blogs.msdn.com/.../pining-for-windows-phone-7-controls-we-got-ya-covered-announcing-the-first-release-of-the-silverlight-for-windows-phone-toolkit.aspx

  • Anonymous
    November 12, 2010
    The comment has been removed

  • Anonymous
    November 12, 2010
    The comment has been removed

  • Anonymous
    November 12, 2010
    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!

  • Anonymous
    November 12, 2010
    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
  • Anonymous
    November 12, 2010
    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. :)

  • Anonymous
    November 13, 2010
    is there any way to define the minutes interval for the timepicker ? e.g. to 15 minutes ?

  • Anonymous
    November 13, 2010
    kook88, 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! :)

  • Anonymous
    November 29, 2010
    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 : blogs.msdn.com/.../un-timespanpicker-pour-le-toolkit-windows-phone-7.aspx Hope it helps

  • Anonymous
    November 30, 2010
    Stéphanie Hertrich, Neat, thanks! :)

  • Anonymous
    December 26, 2010
    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?

  • Anonymous
    December 26, 2010
    David, 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! :)

  • Anonymous
    December 26, 2010
    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. Thanks!

  • Anonymous
    December 28, 2010
    KevinUK, 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.

  • Anonymous
    December 29, 2010
    Ah OK, I'll keep an eye out for more updates.

  • Anonymous
    December 29, 2010
    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..

  • Anonymous
    December 30, 2010
    louis, 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!

  • Anonymous
    January 17, 2011
    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.  

  • Anonymous
    January 17, 2011
    Troy, 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: blogs.msdn.com/.../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! :)

  • Anonymous
    July 29, 2013
    hii David,Could you please guide me how to change background color of datepicker full page...plz plz thanjs in advance...my mail id:hurry2satish@gmail.com

  • Anonymous
    July 30, 2013
    satish, Changing the Background property of the PhoneApplicationPage in the example above should do what you want.