DateAndTimePicker

DatePicker

Namespace: DIPS.Xamarin.UI.Controls.DatePicker

This is an wrapped version of the original DatePicker from Xamarin.Forms. It removes its borders and add the possibility to set a Format to adjust how the label that the user clicks to open the DatePicker will look.

Samples can be found here.

👉 To get started, make sure you have followed the getting started steps

Example usage

<dxui:DatePicker Date="{Binding MyDate}" Format=Default />

Look and feel

Adding an extra button

There might be a situation where the user want's an extra button to click in the date picker. This can be achieved by setting the ExtraButtonText property and handle the click by setting the ExtraButtonCommand or handling the ExtraButtonClicked event.

"Today" Scenario

The user want's an extra button that says "Today". The button should set the selected date to the date of today.

The library consumer have to set the ExtraButtonText and ExtraButtonCommand like so:

   <dxui:DatePicker  Date="{Binding Date}"
                     ExtraButtonText="Today"
                     ExtraButtonCommand="{Binding SetTodayDateCommand}"
                     />

In the view model they can implement the command and do the following:

SetTodayDateCommand = new Command(() =>
            {
                Date = DateTime.Now; //Raises property changed
            });

The button will appear in the left side of the date picker / toolbar and when the user taps it the command will get executed and the date picker will disappear.

Android :

iOS :

DateChangedStrategyiOS

The default behavior of a DatePicker on iOS is to set Date when the value changes inside of the DatePicker. Our DatePicker can override this behavior so that the Date get's set when the user taps Done.

The library consumer have to set DateChangedStrategyiOS = WhenDone like so:

<dxui:DatePicker Date="{Binding Date}"
                 DateChangedStrategyiOS="WhenDone"
                 />

Properties

Property	Explanation	Remarks	default value
Date	The selected date that the user select from the date picker		DateTime.Today
Format	The format to use when displaying the date label. Supported formats.	Non-bindable	Short
LabelColor	The color of the label that the user clicks to chose a date		Color.Black
LabelSize	The size of the label that the user clicks to chose a date	Can be set by using the normal NamedSize strings	NamedSize.Body
Closed	Invoked when the date picker is closed.
Opened	Invoked when the date picker is opened.
ExtraButtonClicked	Invoked when the extra button that is placed to the left in the date picker is clicked.
ExtraButtonCommand	The command that executes when the user taps the extra button to the left in the date picker.
ExtraButtonCommandParameter	The command parameter to be passed to the ExtraButtonCommand.
ExtraButtonText	The text of the extra button that you can add to the left in the date picker.
DateChangedStrategyiOS	A enum to pick between the different strategies for when the date picker should update its date value.	This works only for iOS.	iOSDateChangeStrategy.WhenValueChanged

TimePicker

Namespace: DIPS.Xamarin.UI.Controls.TimePicker

This is an wrapped version of the original TimePicker from Xamarin.Forms. It removes its borders and add the possibility to set a Format to adjust how the label that the user clicks to open the TimePicker will look.

Samples can be found here.

Example usage

<dxui:TimePicker TimePicker="{Binding MyDate}" Format=Default />

Look and feel

Properties

Property	Explanation	Remarks	default value
Time	The selected time timespan that the user has selected from the time picker		DateTime.Now hour and minutes
Format	The format to use when displaying the time label. Supported formats.	Non-bindable	Default
LabelColor	The color of the label that the user can click to open the time picker		Color.Black
LabelSize	The label size of the label that the user can click to open the time picker	Can be set by using the normal NamedSize strings	NamedSize.Body