Fix odd DatePicker animation behaviour in SwiftUI form

Question

I\'m getting some odd animation behaviour with DatePickers in a SwiftUI form. A picture is worth a thousand words, so I\'m sure a video is worth a million words: https://img

Answer 1

Here are two possible workarounds for iOS <14: 1) simple one is to disable animation at all, and 2) complex one is to mitigate incorrect animation by injecting custom animatable modifier

Tested both with Xcode 11.4 / iOS 13.4

1) simple solution - wrap DatePicker into container and set animation to nil

VStack {
    DatePicker("Test", selection:$date).id(2)
}.animation(nil)

2) complex solution - grab DatePicker changing frame using a) view preference reader ViewHeightKey and b) animate this frame explicitly using AnimatingCellHeight from my other solutions.

struct TestDatePickersInForm: View {
    @State var date = Date()
    @State var isDateShown = false
    @State private var height = CGFloat.zero
    var body: some View {
            Form {
                Section(header: Text("Title")) {
                    // demo of complex solution
                    VStack {
                        DatePicker("Test", selection:$date).id(1)
                            .background(GeometryReader {
                                Color.clear.preference(key: ViewHeightKey.self,
                                    value: $0.frame(in: .local).size.height) })
                    }
                    .onPreferenceChange(ViewHeightKey.self) { self.height = $0 }
                    .modifier(AnimatingCellHeight(height: height))
                    .animation(.default)

                    // demo of simple solution
                    VStack {
                        DatePicker("Test", selection:$date).id(2)
                    }.animation(nil)

                    Text("Pick a date").onTapGesture {
                        withAnimation {
                            self.isDateShown.toggle()
                        }

                    }
                    if(isDateShown) {
                        DatePicker("", selection: $date).datePickerStyle(WheelDatePickerStyle()).labelsHidden().id(3)
                    }

                }
                Section(header: Text("hello")) {
                    Text("test")
                }
        }

    }
}

Answer 2

closest solution is to move the datepickers to its own sections

Form {
            Section(header: Text("Title")) {
                
                DatePicker(selection:$date1, label: {Text("Test")}    )
                
            }
            DatePicker("Test", selection:$date2)
            Section{
                Text("Pick a date").onTapGesture {
                    withAnimation {
                        self.isDateShown.toggle()
                    }
                    
                }
                if(isDateShown) {
                    DatePicker("", selection: $date3).datePickerStyle(WheelDatePickerStyle()).labelsHidden()
                }
            }
            Section(header: Text("Hello")){
                Text("Hello")
            }
        }

Answer 3

Funny enough.. with the new beta, they apparently changed the DatePicker.

So if you have no problem with iOS 14+ only...