Xamarin.Forms 24 hour TimePicker on iOS

Jul 16, 2014 | 1 min read | Xamarin, Xamarin Forms, iOS

I'm utilizing Xamarin.Forms in my next app to more easily support both iOS, Android and Windows Phone using the (mostly) same code base. It's relatively new however, and some use cases are not yet supported using Xamarin's supplied controls.

The Problem

My problem today was showing a TimePicker using a 24 hour time format, regardless of the users selected locale. The TimePicker normally respects the users preference, but I'm using the control to select a range of time, not a point in time.

TimePicker's Format property only affects the string showing the selected time, not the selection itself.

Forcing 24 hours on iOS

Since my next app will first be released on iOS (naturally), I tackled the problem there first. My solution was to create a custom renderer which forces the underlying UIDatePicker to always use a local with a 24 hour time format. In this case I chose Norwegian, but any 24h locale will do.

using MonoTouch.Foundation;
using MonoTouch.UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using PersonalTrainer.iOS.View.Controls;

[assembly: ExportRenderer (typeof (TimePicker), typeof (TimePicker24HRenderer))]
namespace YourNamespace.iOS.View.Controls {
  public class TimePicker24HRenderer : TimePickerRenderer {
    protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e) {
      base.OnElementChanged(e);
      var timePicker = (UIDatePicker)Control.InputView;
      timePicker.Locale = new NSLocale("no_nb");
    }
  }
}

To use the code yourself, just drop the class into your iOS project and use the TimePicker normally in your shared project or PCL.