Xamarin Forms timepicker 24hour

Question

I'm new to Xamarin.Forms and i can't seems to find how to show the dialog in a 24hour format instead of a AM/PM

can someone help me ?

Thank you

Markley

In XAML? Codebehind? or both? – Honeywell

Answer 1

This page is really usefull to learn how to format dates in C#:

https://msdn.microsoft.com/en-us/library/8kb3ddd4%28v=vs.110%29.aspx

And with this code I was able to show a 24 hour format:

TimePicker timePicker = new TimePicker
{
   Format = "HH:mm"
};

Particularity

It's not so obvious, but this does in fact also change the TimePicker popup dialog to be in 24-hour format. – Clayberg

Answer 2

The only solution i found is here: 24h timepicker

Basically a custom renderer within each platform project will be needed.

Xamarin.iOS:

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");
        }
    }
}

For Android:

[assembly: ExportRenderer(typeof(TimePicker), typeof(TimePicker24HRenderer))]

namespace YourNamespace.Droid.View.Controls {

    public class TimePicker24HRenderer : ViewRenderer<Xamarin.Forms.TimePicker, Android.Widget.EditText>, TimePickerDialog.IOnTimeSetListener, IJavaObject, IDisposable {

        private TimePickerDialog dialog = null;

        protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e) {
            base.OnElementChanged(e);
            this.SetNativeControl(new Android.Widget.EditText(Forms.Context));
            this.Control.Click += Control_Click;
            this.Control.Text = DateTime.Now.ToString("HH:mm");
            this.Control.KeyListener = null;
            this.Control.FocusChange += Control_FocusChange;
        }

        void Control_FocusChange(object sender, Android.Views.View.FocusChangeEventArgs e) {
            if (e.HasFocus) { ShowTimePicker(); }
        }

        void Control_Click(object sender, EventArgs e) {
            ShowTimePicker();
        }

        private void ShowTimePicker() {
            if (dialog == null) {
                dialog = new TimePickerDialog(Forms.Context, this, DateTime.Now.Hour, DateTime.Now.Minute, true);
            }

            dialog.Show();
        }

        public void OnTimeSet(Android.Widget.TimePicker view, int hourOfDay, int minute) {
            var time = new TimeSpan(hourOfDay, minute, 0);
            this.Element.SetValue(TimePicker.TimeProperty, time);

            this.Control.Text = time.ToString(@"hh\:mm");
        }
    }
}

For Windows Phone:

[assembly: ExportRenderer (typeof (MyTimePicker), typeof (TimePicker24HRenderer))]

namespace YourNamespace.WindowsPhone.View.Controls {

    public class TimePicker24HRenderer : TimePickerRenderer {

        // Override the OnElementChanged method so we can tweak this renderer post-initial setup

        protected override void OnElementChanged (ElementChangedEventArgs<Xamarin.Forms.TimePicker> e) {
            base.OnElementChanged (e);

            if (Control != null) {
                var nativeControl = (Windows.UI.Xaml.Controls.TimePicker)Control;
                nativeControl.Foreground = new SolidColorBrush(Colors.Gray);

                Control.ClockIdentifier = "24HourClock";
            }
        }
    }
}

Gley

Thanks @Gley , there is still 1 issue with the Android solution. When I try to open the picker via the Focus() command in code, the dialog does not pops, when I remove the custom renderer, it shows via Focus(), any idea? – Pahang

Hi, are you trying to trigger focus when some other button is clicked? Because i had the same issue, and i dont know why picker doesn't focus. – Dunne

Yes, I hide the picker, and want to show the picker when some button is tapped, but the Focus() does not trigger it :( – Pahang

@Pahang Did you find out a solution ? – Pellerin

There is now a "Format" property you can set to "HH:mm" to force 24 hour format. Much less code. – Gametocyte

Answer 3

In XAML you can set the the 24 hours format string to TimePicker by using the Format property:

<TimePicker Format="HH:mm"/>

Honeywell

Answer 4

Ok. You have to do it plateform specific.. I did something like that. So create an interface

public interface TimePickerInterface
    {
        void showTimePicker (ButtonOrLabel lbl);
    }

In Android you create your timepicker class

[assembly:Dependency(typeof(yournamespace.MyTimePicker))]
namespace yournamespace
{

    public class MyTimePicker:Java.Lang.Object,TimePickerInterface,Android.App.TimePickerDialog.IOnTimeSetListener
    {
        String originalText="";
        LabelOrButton lbl=new LabelOrButton();

        public void showTimePicker(LabelOrButton lbl)
        {
            var c = Forms.Context;
            originalText = lbl.Text;
            this.lbl = lbl;
            var time = DateTime.Now.TimeOfDay;
            TimePickerDialog dialog = new TimePickerDialog(c,this,time.Hours,time.Minutes,true);
            dialog.SetCanceledOnTouchOutside (true);
            dialog.Show ();
        }
        public void OnTimeSet (Android.Widget.TimePicker view, int hourOfDay, int minute)
        {
            if(view.IsShown)
                lbl.Text = (hourOfDay<=9 ? ("0"+hourOfDay+""):hourOfDay+"")+":"+(minute<=9 ? ("0"+minute+""):minute+"");
        }
    }
}

And in your xamarin forms you call it in actionlistener of your button or gesturerecognizer of your label:

DependencyService.Get<TimePickerInterface> ().showTimePicker(myButtonOrLabel);

You can do the same thing for DatePicker.. Hope it helps..

Gley