Xamarin.forms: [Bug] [iOS] DatePicker & TimePicker inconsistency on iOS 14

[mduchev]

Description

The DatePicker & TimePicker views are looking strangely on iOS 14. The TimePicker also doesn't have the keyboard visible, as it does on Apple's apps. For reference, see apps like Phone, Calendar, Reminders, etc.

Steps to Reproduce

1. Create a new Xamarin.Forms solution
2. Add DatePicker or TimePicker views to the page's content
3. Run the app (see the attached project below)

Expected Behavior

The picker elements to be rendered normally.

Actual Behavior

The picker elements are rendered very strangely (showing initially the selected value) and the TimePicker doesn't have the keyboard on as it does on other iOS apps. They are functional (working) though.

Basic Information

• Version with issue: 4.8.0.1451
• Last known good version: N/A
• IDE: Visual Studio 2019 for Mac
• Affected Devices: iOS devices

Screenshots

For reference with Apple's apps:

Reproduction Link

DemoIos14Issues.zip

[stesvis]

Same here, looks quite ugly.

[ChristianFrom]

I have the same issue on my application.

[stesvis]

Turns out that for the moment we can use a renderer and set the PreferredDatePickerStyle property.
This is what I did:

    public class MyDatePickerRenderer : DatePickerRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<DatePicker> e)
        {
            base.OnElementChanged(e);

            if (e.NewElement != null && this.Control != null)
            {
                try
                {
                    if (UIDevice.CurrentDevice.CheckSystemVersion(13, 2))
                    {
                        UIDatePicker picker = (UIDatePicker)Control.InputView;
                        picker.PreferredDatePickerStyle = UIDatePickerStyle.Wheels;
                    }
                }
                catch (Exception)
                {
                    // do nothing
                }
            }
        }
    }

So basically for iOS 13.2+ force it to use the old wheel style. I put it in a try catch to use the new default if anything fails...

[mduchev]

Perfect! I can confirm that the workaround workes for both Date- & TimePickers. Just FYI - CheckSystemVersion is greater than or equal to the specified major and minor values, so the correct check will be CheckSystemVersion(14, 0). (ref: docs)

[stesvis]

Yes, I just check for 13.2 because i read that they started to introduce these changes in 13.2 (even tho i've seen it with 14+).
Either way, if i am wrong it might throw an exception and do nothing.

[wislon]

FYI: I've just tried it on iOS 13.5 and iOS 14.0.

On 13.5, it's the original 'Wheels' implementation, but on iOS 14, it (without @stesvis' fix), it's the new implementation.
The fix works perfectly on iOS 14, thanks so much @stesvis! :)

[hartez]

See also #11963.

This should be addressed by #12288 and #12158 (which are similar to the fix from @stesvis upthread).

There's also #12139 in the works, which will allow you to set a UIDatePickerStyle from a platform specific.