XamGirl

A time ago I did an article on how to create a Clearable Date Picker, recently someone asked me to do the same but with a Time Picker. So why not?

In this article, I’m going to show you how to create a Time Picker that can be cleared and set to a null date.

Let’s start

1. In your XF Project create a NullableTimePicker class that extends from TimePicker

This class will have two main bindable properties:

• NullableTime: To bind our nullable TimeSpan.
• PlaceHolder: The value that will be visible when the picker is null, by default it will be “/ . /”.

The code inside is quite simple, a method to clear the NullableTime property and another method to update the time format depending on whether the value is null or not.

2. In your iOS project create a NullableTimePickerRenderer

Use this renderer to add a Clear button to the iOS TimePicker.

3. In your Android project create a NullableTimePickerRenderer

Use this renderer to create a TimePicker view that contains a Clear button.

4. Use the control

To use it just add the control in your view and instead of binding the ViewModel property to the Time property, bind it to the NullableTime property instead.

Result

• 

• 

You can check the full sample source code here.

Happy coding!