[Bug] Time Picker is broken in Xamarin.Forms as of iOS 14 Public Beta 6

[HenryLeC]

Description

Steps to Reproduce

1. Install Xcode 12 beta 6
2. Run a Xamarin.Forms app with a Time Picker
3. Click On Time Picker to open picker.
4. Click on incorrect time in picker to open the iOS 14 Beta 6 Time Wheel
5. Change Time to crash app

Expected Behavior

Should Time Wheel when Picker is Selected instead of the old picker style menu with one time to click on. App should not crash when time wheel is changed

Actual Behavior

Time Picker opens old picker style menu with single incorrect time to click. Opens new iOS Time Wheel on selection of incorrect time in picker dropdown. App crashes when time is changed with exception

 $exception | {System.ArgumentOutOfRangeException: The added or subtracted value results in an un-representable DateTime. Parameter name: value   at System.DateTime.AddTicks (System.Int64 value) [0x0001c] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/Common/src/CoreLib/System/DateTime.cs:487    at System.DateTime.Add (System.Double value, System.Int32 scale) [0x0004f] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/Common/src/CoreLib/System/DateTime.cs:379    at System.DateTime.AddSeconds (System.Double value) [0x00000] in /Library/Frameworks/Xamarin.iOS.framework/Versions/Current/src/Xamarin.iOS/external/corefx/src/Common/src/CoreLib/System/DateTime.cs:475    at Xamarin.Forms.Platform.iOS.DateExtensions.ToDateTime (Foundation.NSDate date) [0x00000] in D:\a\1\s\Xamarin.Forms.Platform.iOS\Extensions\DateExtensions.cs:15    at Xamarin.Forms.Platform.iOS.TimePickerRendererBase`1[TControl].OnValueChanged (System.Object sender, System.EventArgs e) [0x00000] in D:\a\1\s\Xamarin.Forms.Platform.iOS\Renderers\TimePickerRenderer.cs:141    at UIKit.UIControlEventProxy.Activated () [0x00004] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.20.2.2/src/Xamarin.iOS/UIKit/UIControl.cs:38  --- End of stack trace from previous location where exception was thrown ---    at (wrapper managed-to-native) UIKit.UIApplication.UIApplicationMain(int,string[],intptr,intptr)   at UIKit.UIApplication.Main (System.String[] args, System.IntPtr principal, System.IntPtr delegate) [0x00005] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.20.2.2/src/Xamarin.iOS/UIKit/UIApplication.cs:86    at UIKit.UIApplication.Main (System.String[] args, System.String principalClassName, System.String delegateClassName) [0x0000e] in /Library/Frameworks/Xamarin.iOS.framework/Versions/13.20.2.2/src/Xamarin.iOS/UIKit/UIApplication.cs:65    at Testing.iOS.Application.Main (System.String[] args) [0x00001] in C:\Users\henry\source\repos\Testing\Testing.iOS\Main.cs:17 } | System.ArgumentOutOfRangeException

Basic Information

• Version with issue: All versions
• Last known good version: Apps Built before Public Beta 6
• IDE: Visual Studio
• Platform Target Frameworks:
  • iOS: 14.0 Public Beta 6
• Nuget Packages: Xamarin.Forms, Xamarin.Essentials, NETStandard.Library
• Affected Devices: iOS

Screenshots

Reproduction Link

https://github.com/HenryLeC/Xamarin.Forms_iOS_Time_Picker

Workaround

No Workaround Found

[HenryLeC]

I have found a workaround that might work for some people.

1. Install public Xcode 11
2. Install Xcode 12 Beta
3. Make sure Xamarin is using Xcode 11
4. Build app with iOS 14 support but, with old time and date picker

[davidortinau]

To control the behavior of the pickers in iOS 14, set the PreferredDatePickerStyle to wheels, compact, inline, or automatic. Here's setting it back to Wheels so you get the existing behavior:

using System;
using UIKit;
using Xamarin.Forms;
using SetTimer.iOS.Renderers;

[assembly: ExportRenderer(typeof(TimePicker), typeof(TimePickerRenderer))]
namespace SetTimer.iOS.Renderers
{
    public class TimePickerRenderer : Xamarin.Forms.Platform.iOS.TimePickerRenderer
    {
        protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.ElementChangedEventArgs<TimePicker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                UITextField entry = Control;
                UIDatePicker picker = (UIDatePicker)entry.InputView;
                picker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
            }
        }       
    }
}

This could perhaps be made an effect to be applied to both time and date. I'm sure the team will implement something more elegant, but if anyone feels blocked this should get you going.

[HenryLeC]

Thank you @davidortinau I would recommend adding an option to the TimePicker and DatePicker controls for the iOS PreferredDatePickerStyle. This is only an issue when using the new versions of Xcode 12, so you can fix the issue by building with Xcode 11 (be sure to install Xcode 12 to make sure you have iOS 14 build support though)

[Kingamattack]

There is a similar issue on the DatePicker.

I tried a renderer as @davidortinau recommanded with UIDatePickerStyle.Inline as parameter but looks like the size of the view is cropped and we can't see the whole picker.

[HenryLeC]

@Kingamattack I have made a renderer that uses the old Date Picker as well. I will update this comment around 6 EST today with my renderer.

[HenryLeC]

@Kingamattack I am not able to test it right now but this should work

using System;
using UIKit;
using Xamarin.Forms;
using SetTimer.iOS.Renderers;

[assembly: ExportRenderer(typeof(DatePicker), typeof(DatePickerRenderer))]
namespace SetTimer.iOS.Renderers
{
    public class DatePickerRenderer : Xamarin.Forms.Platform.iOS.DatePickerRenderer
    {
        protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);

            if (Control != null)
            {
                UITextField entry = Control;
                UIDatePicker picker = (UIDatePicker)entry.InputView;
                picker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
            }
        }       
    }
}

This should restore the old Wheels functionality.

[abhcr]

To control the behavior of the pickers in iOS 14, set the PreferredDatePickerStyle to wheels, compact, inline, or automatic. Here's setting it back to Wheels so you get the existing behavior:

using System;
using UIKit;
using Xamarin.Forms;
using SetTimer.iOS.Renderers;

[assembly: ExportRenderer(typeof(TimePicker), typeof(TimePickerRenderer))]
namespace SetTimer.iOS.Renderers
{
  public class TimePickerRenderer : Xamarin.Forms.Platform.iOS.TimePickerRenderer
  {
      protected override void OnElementChanged(Xamarin.Forms.Platform.iOS.ElementChangedEventArgs<TimePicker> e)
      {
          base.OnElementChanged(e);

          if (Control != null)
          {
              UITextField entry = Control;
              UIDatePicker picker = (UIDatePicker)entry.InputView;
              picker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
            }
      }       
  }
}

This could perhaps be made an effect to be applied to both time and date. I'm sure the team will implement something more elegant, but if anyone feels blocked this should get you going.

Unfortunately this fix doesn't cause any change in how the time picker is being displayed. Using Xamarin.Forms 5.0.0.1874, with XCode 12.3.

[HenryLeC]

@abhcr could you try updating to the newest stable release?

[ismith78]

Is there a similar fix available for WebView time and date pickers? I'm seeing the same issue on iOS with 5.0.0sr3 with the following HTML

Putting a breakpoint on my custom renderer shows that the renderer is never called from a webview.