DatePicker control

The DatePicker control allow users to select a date, and to display that date in the specified format. While editing the control shows month in a keyboard like popup window and allows to zoom out to year view and decade view.  If the date text box is at the bottom of a page then page will be pushed up to display the control above the month popup.

Month Picker Control  Month Picker - Year  Month Picker - Decade



Using DatePicker

To use DatePicker in your project, add reference to the StoreAppLib project or install StoreAppLib from Visual Studio "Manage NuGet Packages" tool.

To add DatePicker in a page, add the following namespace reference to the page.

<Pagexmlns:storeAppControl="using:StoreAppLib.Controls" ...

Use the following code to add control to the page. Use Date property to bind the control to your data source and use Format property to change the date display format.

       Date="{Binding CurrentDate, Mode=TwoWay }"
       Format="dd-MMM-yyyy" />

To clear DatePicker value, use any of the following three methods 

  1. Reset the date value bound to the date control's Date property
  2. Call Clear() method of the date control
  3. Bind to ClearCommand property of the date control in XAML

To set date range, use MinimumDate and MaximumDate properties.  Date control will display the invalid dates in different colour and will not allow user to select the dates. If you want to alert the user when tapping on an invalid date, set the property  ShowValidationMessage="True". Control will show an alert using the following format string.

"Selected date {0:dd MMMM yyyy} is invalid.
Please select a date between {1:dd MMMM yyyy} and {2:dd MMMM yyyy}."

The format patterns in the alert string will be replaced with Selected Date, MinimumDate and MaximumDate respectively. You can replace the default validation error message by providing through MinDateValidationMessage  and MaxDateValidationMessage  properties. Use .Net date format string pattern as shown above to replace with selected date, minimum date and maximum date.
If you want to use custom validation and dialog box, you can use DateChanged event of the date control. The DateTime property of the DateTimeEventArgs object in the event provide the selected date. Set the Cancel property of the object to true or false to cancel or accept the selected date by user

You can use the following properties to customize the control colours.

  • DateForeground: Date foreground colour property for days in the current month.
  • DateOtherMonthForeground: Date foreground colour property for days not in the current month.
  • DateTodayForeground: Today's date foreground colour property.
  • DateBackground: Date background colour property.
  • SelectedDateBackground: Selected date background colour property.
  • HeaderForeground: Header foreground colour property for month, year and decade header.
  • MonthHeaderForeground: Month header foreground colour property.
  • MonthHeaderBackground: Month header background colour property.
  • DateDisabledForeground: Disabled date (when less than MinimumDate or greater than MaximumDate) foreground colour property.
  • DateDisabledBackground: Disabled date (when less than MinimumDate or greater than MaximumDate) background colour property.


Last edited Oct 19, 2013 at 3:27 PM by sureshkumart, version 13


erkekserkan Dec 16, 2013 at 4:52 PM 
Hello, how can I set datepicker in different language?

sureshkumart Oct 19, 2013 at 4:09 PM 
Added MinimumDate and MaximumDate properties

aniruddhamazumdar Jun 5, 2013 at 7:01 AM 
Hey there! If I have to disable past date selection from this control, how do I approach?