This is part of a series on migrating from the WP Toolkit
With the release of the new Windows Phone 8.1 SDK comes new controls that previously were only available in the Windows Phone Toolkit. One of these controls is the DatePicker. The new DatePicker is a nice addition to the SDK and something people have been asking for since the beginning.
The DatePicker is part of the core controls, so you no longer need a namespace prefix
<!-- from -->
<toolkit:DatePicker/>
<!-- to -->
<DatePicker/>
To set the Date on the DatePicker, you use the Date property rather than the Value property from the toolkit. And of course the Date property allows for binding.
<!-- from -->
<toolkit:DatePicker Value="{Binding Date}” />
<!-- to -->
<DatePicker Date="{Binding Date}"/>
It still has a Header property allowing you to place a label for what the date represents
<DatePicker Header="Date" Value="{Binding DateValue}"/>
Like other Runtime (aka XAML) controls, the DatePicker does not have the same margins as the toolkit version. If you want to do a direct replacement, you add a left and right margin of 9.5 (assuming it is contained within an element that also has a 9.5 side margin).
<DatePicker Margin="9.5,0"/>
To match the Date property, the event you want to listen to for the date changing is the DateChanged event. This replaces the ValueChanged event from the toolkit. The event gives you event args with the old and new values.
The DatePicker has some awesome properties to format date values, but they do not work in Windows Phone Apps. The docs has a few samples listed that allow you to format different parts of the date.
<!-- DatePicker formatted using format templates. -->
<DatePicker DayFormat="day" MonthFormat="month.numeric" YearFormat="year.abbreviated"/>
<!-- DatePicker formatted using format patterns. -->
<DatePicker DayFormat="{}{day.integer}" MonthFormat="{}{month.integer}" YearFormat="{}{year.abbreviated}"/>
<!-- combines 2 format patterns to display both the numeric date and the day of the week -->
<DatePicker DayFormat="{}{day.integer} {dayofweek.abbreviated}"/>
When adding these three samples we get the following from Windows and Windows Phone.
You can set the MinYear and MaxYear that is allowed for the DatePicker, but unfortunetly, that’s it. I would prefer the ability to have a Min and MaxValue allowing me to restrict every part of the date from day, month, and year. It does however come with a great new property, CalendarIdentifier. This new property allows you to set what calender system should be used. It has nine supported values. Adding each calendar to a page gives us the following.
One property that was lost is the ValueStringFormat from the Windows Phone Toolkit DatePicker. This property allowed you to format how the date was displayed. Here is an example of two DatePickers from the Toolkit. The top one has no formatting while the bottom does.
<toolkit:DatePicker Header="Default"/>
<toolkit:DatePicker Header="Formatted" ValueStringFormat="{}{0:dd-MM-yyyy}"/>
I’m hoping the ability to change the format will return.