WheelDatePicker is invisible in iOS 15.0

Question

I'm building an app in SwiftUI that needs DatePicker in the custom alert. Each time I use DatePicker with a WheelDatePickerStyle, it is invisible in IOS 15.0 (also in compact mode - after clicking a month and year in the upper left corner).

What's strange, the DatePicker works on the same device with iOS 14.4. I thought it was an iOS 15 beta error, however, on the internet, I couldn't find any information about this bug, which is why I assumed that I could do something wrong. The only thing I know is that WheelDatePicker has changed slightly in iOS 15.

The error applies to smaller devices, i.e. iPod touch, iPhone SE 2020, etc. - those with a TouchID. On the physical iPhone SE (2nd generation) with IOS 15.0 (beta 3), this error also occurs.

Below, I attached the code and screenshot of the problem. Thank you in advance for tips, solutions, and explanations of why this problem occurs.

CODE:

// Custom DatePicker Alert
import SwiftUI

struct BirthdayPicker: View {
    // Properties
    @State private var previousDate: Date = Date()
    @Binding var birthday: Date
    @Binding var isVisible: Bool
    let savingAction: (() -> ())?
    
    var body: some View {
        ZStack {
            // A field outside, which - if has been tapped - hides alert with DatePicker.
            Color.black.opacity(0.00001)
                .onTapGesture {
                    withAnimation { self.isVisible = false }
                }
            
            // Alert with DatePicker
            VStack {
                Text(LocalizedStrings.chooseBirthday)
                    .padding(.top)
                
                DatePicker("",
                           selection: $birthday,
                           in: ...Date(),
                           displayedComponents: [.date])
                    .datePickerStyle(WheelDatePickerStyle())
                    .labelsHidden()
                
                HStack {
                    // Cancel Button
                    Button(LocalizedStrings.cancel) {
                        self.birthday = previousDate
                        self.isVisible = false
                    }
                    .foregroundColor(.red)
                    
                    Spacer()
                    
                    // Save Button
                    Button(LocalizedStrings.save) {
                        if let savingAction = savingAction {
                            savingAction()
                        } else {
                            self.isVisible = false
                        }
                    }
                }
                .padding([.horizontal, .bottom])
            }
            .frame(width: UIScreen.main.bounds.width - 40)
            .background(Color(.systemBackground))
            .clipShape(RoundedRectangle(cornerRadius: 15))
            .contentShape(RoundedRectangle(cornerRadius: 15))
            .shadow(radius: 10)
            .onAppear { self.previousDate = birthday }
        }
    }
}

// A sample View that uses this DatePicker alert - other than in the picture below
import SwiftUI

struct WelcomeSlide2: View {
    // Properties
    @State var birthday: Date = Date()
    
    var body: some View {
        ZStack {
            Background()
            
            GeometryReader { geom in
                ScrollView(.vertical) {
                    // Title and Subtitle
                    Text(LocalizedStrings.welcomeTitle2)
                        .font(.largeTitle)
                        .fontWeight(.semibold)
                        .padding(.top)
                    Text(LocalizedStrings.welcomeSubtitle2)
                        .font(.headline)
                        .padding([.bottom, .horizontal])
                        .multilineTextAlignment(.center)
                    
                    // Image Button
                    Button(action: { self.showingImagePicker = true }) {
                        ProfileImagePlaceholder(image: $image, inputImage: $inputImage)
                    }
                    .frame(width: 100, height: 100)
                    .shadow(radius: 10)
                    .padding(.vertical)
                    .accessibility(label: Text(LocalizedStrings.addPhotoButton))
                    
                    VStack(alignment: .leading) {
                        // Name TextField
                        TextField(LocalizedStrings.name, text: $name)
                            .font(.title3)
                        
                        Divider()
                        
                        // CUSTOM DATEPICKER ALERT - BUGGED
                        // ---------------------------------------------------------
                        // Birthday DatePicker
                        HStack {
                            Text(LocalizedStrings.birthday)
                            Spacer()
                            Button(action: { withAnimation { self.showingBirthdayPicker.toggle() } }) {
                                Text(UserDataManager.shared.dateFormatter.string(from: birthday))
                            }
                        }
                        // ---------------------------------------------------------
                        
                        Divider()
                        
                        // Zodiac Sign
                        HStack {
                            Text(LocalizedStrings.zodiacSign)
                            Spacer()
                            Text(zodiacSign)
                        }
                        
                        Divider()
                        
                        // About
                        Text(LocalizedStrings.aboutMe)
                        TextEditor(text: $about)
                            .foregroundColor(.gray)
                            .offset(x: -4, y: -15)
                    }
                    .padding(.horizontal)
                    .font(.subheadline)
                    
                    Spacer()
                    
                    HStack {
                        Spacer()
                        NavigationLink(destination: WelcomeSlide3(), isActive: $didTapNextSlide) {
                            Button {
                                self.containsCustomImage = inputImage == nil ? false : true
                                self.zodiacSign = didChangeDate ? zodiacSign : ""
                                self.didTapNextSlide = true
                            } label: {
                                Image(systemName: "arrow.right")
                                    .font(.system(size: 30))
                                    .foregroundColor(Color(.label))
                            }

                        }
                    }
                    .padding([.trailing, .bottom, .top])
                }
                .frame(minHeight: geom.size.height)
                .overlay(Color.black.opacity(showingBirthdayPicker ? 0.5 : 0).ignoresSafeArea())
                
                if self.showingBirthdayPicker {
                    BirthdayPicker(birthday: $birthday, isVisible: $showingBirthdayPicker, savingAction: nil)
                }
            }
        }
        .navigationBarHidden(true)
    }
}

SCREENSHOT:

Answer 1

I have a same problem.

For the wheel picker, you just need to explicitly set a picker style .pickerStyle(.wheel) and picker will work like before.

Answer 2

looks like the DatePicker is off the screen. Try this:

// Alert with DatePicker
VStack (alignment: .leading){
...

Answer 3

I've had the same problem.

The date picker was invisible because I've had a light background in dark mode. So the date picker chooses a light font color.

Just add

overrideUserInterfaceStyle = .light

in my view controller and the date picker appears as normally.

Alternatively add the Appearance key into your info.plist with value Light to set your entire app to light mode.