Swiftui - Days' name is missing if you show and hide DatePicker

Question

I have a GraphicalDatePickerStyle DatePicker that is hidden by default. When you click a button, it is shown.

It used to work on iOS14. But on iOS15, days' name is missing.

struct ContentView: View {
    @State var isDatePickerVisible: Bool = false
    @State var selectedDate = Date()
    
    var body: some View {
        VStack {
            Button(action: {
                isDatePickerVisible.toggle()
                
            }, label: {
                Text("Show")
            })
            
            
            if isDatePickerVisible {
                DatePicker("Enter your birthday",
                           selection: $selectedDate,
                           displayedComponents: .date)
                               .datePickerStyle(GraphicalDatePickerStyle())
            }
        }
     
    }
}

Result

This is how it looks like when the DatePicker is toggled. You see name of the days are not shown.

This is how it looks like by default if you don't hide it.

score 1 · Answer 1 · answered Oct 02 '21 at 15:23

It appears that you have found a bona fide bug. I can confirm this behavior, as well as the same behavior with a DisclosureGroup(). I did notice that as soon as you select another date, the days of the week appear. They just don't appear from the start. When you file your radar, please post the reference here so everyone can refer to it.

workingdog support Ukraine · Answer 2 · 2021-10-03T00:44:55.133

1

definitely a bug. You can partially get around it by using this:

if isDatePickerVisible {
    DatePicker("Enter your birthday", selection: $selectedDate, displayedComponents: .date)
        .frame(width: 333)   // <--- here
        .datePickerStyle(.graphical)
}

Although when I use 444 on macos, it's back to the bug. Note you can also wrap the DatePicker in a Form {DatePicker(...)} to fix the bug, and it looks quite nice.

edited Oct 03 '21 at 00:44

answered Oct 02 '21 at 23:58

workingdog support Ukraine

26,280
4
27
37

With Form it works. But, the From has `insetGrouped` style, and it seems that it can't be changed. – mahan Oct 03 '21 at 12:24

score 1 · Answer 3 · answered Feb 24 '22 at 16:18

This looks to be an Apple and SwiftUI Bug.

As @workingdog said

you can get around this by wrapping the DatePicker with a Form

or you can use a List and setting a Frame on the wrapper. Using a list should affect your UI too much.

var body: some View {
    VStack {
        Button(action: {
            isDatePickerVisible.toggle()
        }, label: {
            Text("Show")
        })
        List {
            if isDatePickerVisible {
                DatePicker("Enter your birthday",
                           selection: $selectedDate,
                           displayedComponents: .date)
                    .datePickerStyle(GraphicalDatePickerStyle())
            }
        }
        .frame(height: 300)
    }
}

score 0 · Answer 4 · answered Jul 03 '22 at 14:50

After you show the DatePicker, reset the selection after a few seconds / milliseconds.

DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
     selection = selection
}

@State private var selection = Date()

var body: some View {
    DatePicker(
        "Start Date",
        selection: $selection,
        displayedComponents: [.date]
    )
}

Swiftui - Days' name is missing if you show and hide DatePicker

Result

4 Answers4