[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.

[Serena247Pro]

The workaround did change the style perfectly. But it didn't help show the selected date? I also tried adding UITextField entry = Control;UIDatePicker picker = (UIDatePicker)entry.InputView; It doesn't work. Anything missing?

[merlinsmike]

Looks still broken to me, after updating to latest VS2019, Xamarin, all nugets ... I don't know why this is closed. The workarounds work (definitely need version check if you want to support older devices), and some color issues too. Better, but a real correction would be nicer.

[Suplanus]

It's not the best way, but I create a new issue. Perhaps now someone is looking into it: #13373

[mduchev]

I can also confirm that it was working fine in 4.8.0.1821 and it's broken again in 5.0

[martinsmithdev]

Still an issue. Workaround works but needs fix.

EDIT - DOH - fixed in latest forms update. In case anyone wastes 20 minutes creating a custom renderer like I did :)

[Suplanus]

Is fixed in this release: 5.0.0 Service Release 1

[Maxima078]

Is there a way to use compact mode but without the two steps before calendar appears ? I tried Inline wich is probably what I need but there is this issue https://github.com/xamarin/Xamarin.Forms/issues/11963#issuecomment-696189270 Any known workaround?