Anyone find that UIDatePicker is broken under iOS 14?

Question

Under iOS 14, the date/time pickers in my app are broken. Nothing changed in the project. They're defined in a storyboard and worked fine until I updated a few days ago.

Now they're not spinners; they're large grey boxes with static text in them.

UPDATE: Apple broke existing projects by defaulting date/time pickers' style to "automatic", instead of "wheel" (the only style that previously existed, and for which everyone's existing screen layouts were designed). See Sanzio's answer below.

Solution 1

To add some additional information to Oscar's answer...

UIDatePicker now has three different styles, as per documentation here and here. The date picker's style is accessible by the .preferredDatePickerStyle property which can be set to four different cases:

1. .automatic - A style indicating that the system picks the concrete style based on the current platform and date picker mode.
2. .compact - A style indicating that the date picker displays as a label that when tapped displays a calendar-style editor.
3. .inline - A style indicating that the date pickers displays as an inline, editable field.
4. .wheels - A style indicating that the date picker displays as a wheel picker.

If you want things to look how they did pre iOS 14, stick with the .wheels style. It is also worth noting that not all styles can accommodate all date and time settings, hence why you can only set a preferred style.

Lastly, this property is only available in iOS 13.4 or newer, so you will have to accomplish version control with something like:

if #available(iOS 13.4, *) {
    yourDatePicker.preferredDatePickerStyle = UIDatePickerStyle.automatic
} else {
    // Fallback on earlier versions
}

Solution 2

if #available(iOS 13.4, *) {
    datePicker.preferredDatePickerStyle = .wheels
}

Solution 3

If anyone is looking for Objective-C:

if (@available(iOS 13.4, *)) {
    datePicker.preferredDatePickerStyle = UIDatePickerStyleWheels;
} 

Solution 4

It turns out that Apple added a second and very different style of UIDatePicker, and inexplicably made it the default for old projects.

You now have to go into the settings for all of your date/time pickers and change Style from "Automatic" to "Wheels." What "Automatic" is based on and why it doesn't default to the only previously existing style is unknown.

Solution 5

in iOS appDelegate.m 

didFinishLaunchingWithOptions . () inside 

if (@available(iOS 14, *)) {
      UIDatePicker *picker = [UIDatePicker appearance];
    picker.preferredDatePickerStyle = UIDatePickerStyleWheels;
}

<DateTimePickerModal
    datePickerContainerStyleIOS={{paddingHorizontal: 40}}
    // display={Platform.OS === "ios" ? "spinner" : "default"}                              
    isVisible={isDatePickerVisible}
    mode={mode}
    maximumDate={new Date()}
    onConfirm={handleConfirm}
    onCancel={hideDatePicker}
    />

detail description

View more solutions

Comments

[Oscar]

Thanks. Unfortunately, the "inline" and "compact" modes are not available in Interface Builder (Xcode 12.0.1).

[Rajender Kumar]

How to fix the issue if we want to use compact style. I am showing it on UITabBar and its really very bad

[Anuranjan Bose]

Can we make changes at one place, so that we don't have to explicitly go to every view which is using date picker and set it's preferred style to wheels?