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

Namespace

StoreAppLib.Controls

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.

<storeAppControl:DatePicker
       Width="150"
       Height="30"
       BorderThickness="1"
       BorderBrush="Gray"
       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.