Time Picker is a component that allows the user to select a time.

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:

<TimePicker Id="MyTimePicker" />It is initially displayed similar to a drop-down list control, showing the currently selected time (or the placeholder text). When the user taps it, it will then open a dialog to show Hour, Minute and optionally AM/PM selection controls.

 

You can optionally specify the TimeFormat and MinuteInterval properties.

<TimePicker Id="MyTimePicker" MinuteInterval="10" TimeFormat="@TimeFormat.Twentyfour" />Note:

• You can set TimeFormat to AMPM or TwentyFour 
• By default the value of MinuteInterval is 5

 

 

 

 

 

 

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 time, in the next selection, the Cancel button is changed to Remove.

 

 

 

 

 

Box Shadow

 

MarkUp:

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

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:    <TimePicker   BackgroundImageStretch="OriginalRatio" Style.Border="1"  BackgroundImagePath="Images/VS.jpg"/>
    <TimePicker   BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Enabled="false" />
    <TimePicker   BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Visible="false"/>
    <TimePicker   BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg" Ignored="true"/>
    <TimePicker   BackgroundImageStretch="OriginalRatio" Style.Border="1" BackgroundImagePath="Images/VS.jpg"/>

MinuteInterval

The MinuteInterval property determines difference between minutes .By default the value of it is 5.

<TimePicker Id="MyTimePicker" MinuteInterval="1" TimeFormat="@TimeFormat.Twentyfour" />

 

 

 

 

 

 

Position

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

MarkUp:

<TimePicker   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 TimePicker box:

<TimePicker 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

SelectedValue

By setting SelectedValue, you can determine a default value of TimePicker.

  <TimePicker   SelectedValue="04:34PM"   />

SelectedText

By setting SelectedText, you can determine a default text of TimePicker. As you know, each item of TimePicker list has a Value and a Text.

  <TimePicker   SelectedText="05:45AM"  />

TextFormat

<TimePicker  TextFormat="T"/>

<TimePicker  TextFormat="t"/>To see all supported standard .NET time formats see this link.

TimeFormat

You can set TimeFormat to AMPM or TwentyFour.

<TimePicker Id="MyTimePicker"  TimeFormat="@TimeFormat.Twentyfour​" /><TimePicker Id="MyTimePicker"  TimeFormat="@TimeFormat.AMPM" />

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 time of the timepicker was changed.
• on-Swiped: Raised when user swiped on the object.
• on-Tapped: Raised when user tapped on the object.