Search code examples
xamarinxamarin.formstimepicker

How to change TimeFormat depending on system setting in Xamarin

I updated Xamarin.Forms to the latest version 4.8.0.1560. I managed to bind the timepicker on both Android and iOS. The only discrepancy with my application is when the user use 24 time setting in their phone the time picker "stuck" in 12 hour format.

In order to do that I created a custom renderer in iOS

[assembly: ExportRenderer(typeof(TimePicker), typeof(TimeRenderer))]
namespace TabsApp.iOS.custom.renderers
{
    public class TimeRenderer : TimePickerRenderer
    {

        protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
        {
            base.OnElementChanged(e);
            int hours = Element.Time.Hours;
            int minutes = Element.Time.Minutes;

            if (!Is12Hours())
            {
                var timePicker = (UIDatePicker)Control.InputView;  
                timePicker.Locale = new NSLocale("no_nb");  
            }
            
            string format = Is12Hours()?"hh:mm tt":"HH:mm";
            DateTime currTime = DateTime.Now;
            currTime = new DateTime(currTime.Year,currTime.Month,currTime.Day,hours,minutes,0);
            Control.Text = currTime.ToString(format);
          
        }
        
        
        
        private bool Is12Hours()
        {
            var dateFormatter = new NSDateFormatter();
            dateFormatter.DateStyle = NSDateFormatterStyle.None;
            dateFormatter.TimeStyle = NSDateFormatterStyle.Short;

            var dateString = dateFormatter.ToString(NSDate.Now);
            var isTwelveHourFormat = 
                dateString.Contains(dateFormatter.AMSymbol) || 
                dateString.Contains(dateFormatter.PMSymbol);
            return isTwelveHourFormat;
        }
    }
}

OnElementChanged is being called once the application is loaded, and it will show the correct time format. When you change the time, this callback is not being called. Do I need to override other functions? sample

Solution

  • At the end I found the answer from xamarin forms. You will need to change/add custom timepicker renderer.

    This is the code

    [assembly: ExportRenderer(typeof(TimePicker), typeof(TimeRenderer))]
namespace TabsApp.iOS.custom.renderers
{
    public class TimeRenderer : TimePickerRenderer
    {
       
        protected override void OnElementChanged(ElementChangedEventArgs<TimePicker> e)
        {
            base.OnElementChanged(e);

            if (Is12Hours())
            {
                Element.Format = "hh:mm tt";
            }
            else
            {
                var timePicker = (UIDatePicker)Control.InputView;  
                timePicker.Locale = new NSLocale("no_nb");

                Element.Format = "HH:mm";
            }
          
        }


        private bool Is12Hours()
        {
            var dateFormatter = new NSDateFormatter();
            dateFormatter.DateStyle = NSDateFormatterStyle.None;
            dateFormatter.TimeStyle = NSDateFormatterStyle.Short;

            var dateString = dateFormatter.ToString(NSDate.Now);
            var isTwelveHourFormat = 
                dateString.Contains(dateFormatter.AMSymbol) || 
                dateString.Contains(dateFormatter.PMSymbol);
            return isTwelveHourFormat;
        }
    }
}