How do you make a custom renderer for iOS DatePicker Xamarin - ios

Question

I currently want to build a DatePicker with custom buttons on iOS using Xamarin. Out of the box there doesn't seem to be way to do.
Would anyone know how to build a custom renderer that would allow me to add a Cancel button and Next Button when the DatePickerDialog comes into focus?
I basically want this but at the top of this a Cancel button on the left and a next button on the right.

Answer 1

I was able to piece together a solution that does exactly what I want. Unfortunately, I had to use objectveC techniques mixed in with c# in order to get it to work. There is currently a issue triaged in the Xamarin project.
https://github.com/xamarin/Xamarin.Forms/issues/14156
For now here is my solution, which I hope helps others with their similar problems
using System;
using System.ComponentModel;
using System.Globalization;
using dcbel.Mobile.Controls;
using dcbel.Mobile.iOS.Extensions;
using dcbel.Mobile.iOS.Renderers;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(CustomDatePicker), typeof(CustomDatePickerRenderer))]
namespace dcbel.Mobile.iOS.Renderers
{
/// <summary>
/// An extended date picker renderer.
/// </summary>
///
/// <seealso cref="T:Xamarin.Forms.Platform.iOS.DatePickerRenderer"/>
public class CustomDatePickerRenderer : DatePickerRenderer
{
/// <summary>
/// Executes the element property changed action.
/// </summary>
///
/// <param name="sender"> Source of the event. </param>
/// <param name="e"> A PropertyChangedEventArgs? to process. </param>
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs? e)
{
base.OnElementPropertyChanged(sender, e);
if (e != null && e.PropertyName == "DateTime" && this.Element is CustomDatePicker datePicker)
{
this.Control.Text = datePicker.DateTime.ToString(datePicker.Format, CultureInfo.CurrentCulture);
}
}
/// <summary>
/// Executes the element changed action.
/// </summary>
///
/// <param name="e"> An ElementChangedEventArgs{DatePicker} to process. </param>
protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
{
base.OnElementChanged(e);
if (this.Control != null && e?.NewElement is CustomDatePicker datePicker)
{
this.Control.BorderStyle = UITextBorderStyle.None;
if (this.Control.InputAccessoryView is UIToolbar toolbar)
{
var buttonTextAttributes = new UITextAttributes()
{
Font = UIFont.FromName("SFStrong", 15),
TextColor = UIColorExtensions.FromHex("5A5E62"),
};
using var doneButton = new UIBarButtonItem(datePicker.DoneButtonText, UIBarButtonItemStyle.Done, this, ObjCRuntime.Selector.FromHandle(ObjCRuntime.Selector.GetHandle("DoneButtonAction:")));
using var cancelButton = new UIBarButtonItem(datePicker.CancelButtonText, UIBarButtonItemStyle.Done, this, ObjCRuntime.Selector.FromHandle(ObjCRuntime.Selector.GetHandle("CancelButtonAction:")));
using var title = new UIBarButtonItem(datePicker.TitleText, UIBarButtonItemStyle.Plain, null) { Enabled = false };
using var space = new UIBarButtonItem(UIBarButtonSystemItem.FlexibleSpace);
doneButton.SetTitleTextAttributes(buttonTextAttributes, UIControlState.Normal);
title.SetTitleTextAttributes(buttonTextAttributes, UIControlState.Normal);
title.SetTitleTextAttributes(buttonTextAttributes, UIControlState.Disabled);
cancelButton.SetTitleTextAttributes(buttonTextAttributes, UIControlState.Normal);
toolbar.SetItems(new UIBarButtonItem[] { cancelButton, space, title, space, doneButton }, true);
}
if (this.Control.InputView is UIDatePicker uiDatePicker)
{
uiDatePicker.Mode = UIDatePickerMode.DateAndTime;
}
}
}
[Action("CancelButtonAction:")]
private void CancelButtonAction(NSObject sender)
{
this.Control.ResignFirstResponder();
this.Element.Unfocus();
}
[Action("DoneButtonAction:")]
private void DoneButtonAction(NSObject sender)
{
var barButton = (UIBarButtonItem)sender;
if (barButton.Target is CustomDatePickerRenderer datePickerRenderer)
{
if (datePickerRenderer.Control?.InputView is UIDatePicker uiDatePicker)
{
var dateSelected = uiDatePicker.Date.ToDateTime();
((CustomDatePicker)this.Element).DateTime = dateSelected;
}
}
this.Control.ResignFirstResponder();
this.Element.Unfocus();
}
}
}