Date Picker is a component that allows the user to select a date. 

To use this component, install the Zebble.DateTimePicker nuget package. 
It's open source and available on GitHub. Also we welcome any contributions to enhace it.

Basic usage:

<DatePicker Id="MyDatePicker" />

 

It is initially displayed similar to a drop-down list control, showing the currently selected date (or the placeholder text). When the user taps it, it will then open a dialog to show day, month and year selection controls.

 

 

 

 

 

 

 

 

 

AllowNull

It is a boolean property that determines whether user can select nothing or not. The default value is false.

When this property is set to true, after selecting a date, in the next selection, the Cancel button is changed to Remove.

 

 

 

 

Box Shadow

MarkUp:

<DatePicker Style.BoxShadow.Color ="red" Style.BoxShadow.BlurRadius="15" Style.BoxShadow.XOffset="5" Style.BoxShadow.YOffset="5" Style.Border="1"/>

DayFormat

You can define the text representation of the day value of DatePicker by setting DayFormat property. it is a standard day format string uses a single format specifier. For example, if you want to show Short date pattern in the datepicker(6/15/2009), you should set DayFormat property to "d", or if you want to show Long date pattern in the datepicker (Monday, June 15, 2009), you should set DayFormat property to "D".

In case you want to change how a date picker show the date format you can use the following.

<DatePicker Id="MyDatePicker"   DayFormat="D" />

 

 

 

 

 

 

 

<DatePicker Id="MyDatePicker"   DayFormat="d" />

 

 

 

 

 

To see all supported standard .NET date formats see this link.

MonthFormat

In case you want to change how a date picker show the date format you can use the following.

<DatePicker Id="MyDatePicker"  MonthFormat = "MM" />

 

 

 

 

 

 

 

<DatePicker Id="MyDatePicker"  MonthFormat = "MMM" />

 

 

 

 

 

 

 

<DatePicker Id="MyDatePicker"  MonthFormat = "MMMM" />

 

 

 

 

 

To see all supported standard .NET date formats see this link.

TextFormat

In case you want to change how a date picker show the date format you can use the following.

<DatePicker Id="MyDatePicker"   TextFormat="dd/MM/yyyy" />

 

<DatePicker Id="MyDatePicker"   TextFormat="dd/M/yyyy" />As you can see, when we use "...MM..." format, the number of month digit is 2, but when "...M..." format is used, the number of month digit is 1. The day format is same.

To see all supported standard .NET date formats see this link.

Enabled & Ignored

Stylesheet has a boolean property named Ignored, which is false by default. When set to true it works the same as "display: none" in HTML. It means that the element will not only be invisible, but also it won't occupy space on the screen.

View has a boolean property named Enabled, which is true by default. When set to false the object will not respond to UI gesture events. But it will remain visible. Also, its PseudoCssState will be set to "disabled" which allows you to specify a visual style for it in CSS.

MarkUp:<DatePicker BackgroundImageStretch="OriginalRatio" Style.Border="1"  BackgroundImagePath="Images/VS.jpg"/>
    <DatePicker BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Enabled="false" />
    <DatePicker BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Visible="false"/>
    <DatePicker BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Ignored="true"/>
    <DatePicker BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg"/>

Position

You can control the position of DatePicker by setting Style.X and Style.Y properties:

MarkUp:

<DatePicker BackgroundImageAlignment="Right" Style.Border="1" BackgroundImagePath="Images/zebble.png" Style.X="10" Style.Y="10" />

 

PlaceHolder

If the date has not been selected by the user, the PlaceHolder string is shown in the DatePicker box:

<DatePicker Placeholder="heloooo?"/>

Rotation

You can see some information about rotation in  Zebble here: http://zebble.net/docs/rotation-in-zebble

Margin & Padding

You can see some information about Margin & Padding in Zebble here: http://zebble.net/docs/margin-padding

YearFrom & YearTo

<DatePicker  YearFrom="2000" YearTo="2030"/>

The default value of YearFrom property is current year and the default value of YearTo is 2026. You can change them by YearFrom and YearTo property.

 

 

 

 

 

If you do nit set YearFrom value, user can not set previous years.

 

 

 

 

 

 

Events:

• on-Flashed: Raised when the object is flashed.
• on-Initialized: Raised when the object is created and rendered.
• on-Initializing: Raised when the object is being created and rendered.
• on-LongPressed: Raised when user clicked on the object for a long time.
• on-PanFinished: Raised when user panned on the object.
• on-Panning: Raised when user starts to pan on the object.
• on-PreRendered: Raised when the object is not started to rendered before rendering.
• on-SelectedValueChanged: Raised when the date of the datepicker was changed.
• on-Swiped: Raised when user swiped on the object.
• on-Tapped: Raised when user tapped on the object.