SwiftUI Datepicker changes size when first time choosing a date

Question

I have a date picker inside a bottom sheet view.

When the bottom sheet opens, the first time I choose a day, the date picker height changes. P.S: If I set a custom height for the picker using .frame, the date picker just becomes smooshed inside the frame.

    var body: some View {
    VStack {
        HStack {
            Text("date_picker_title".ld())
                .font(.custom(Font.rRegular, size: 12))
                .padding()
            Spacer()
        }
        HStack {
            Text(date.prettyDate)
                .font(.custom(Font.rMedium, size: 28))
            Spacer()
            Text(date.prettyHour)
                .font(.custom(Font.rMedium, size: 28))
        }.padding(.horizontal)
        Seperator(cellHeight: 0).frame(height: 2)

        Spacer().frame(height: 6)
        DatePicker("", selection: $date, in: Date()..., displayedComponents: .date)
            .datePickerStyle(.graphical)
            .labelsHidden()
            .tint(Color.appPurple)
            .padding(.horizontal)
            .padding(.bottom, -10)
        Seperator(cellHeight: 0).frame(height: 2)
        HStack {
            Text("date_picker_enter_time".ld())
                .font(.custom(Font.rRegular, size: 12))
            DatePicker("", selection: $date, displayedComponents: .hourAndMinute)
                .labelsHidden()
                .tint(Color.appPurple)
            Spacer()
        }.padding()
        
        HStack {
            Button {
                completion(nil)
            } label: {
                Text("date_picker_cancel".ld())
                    .font(.custom(Font.rRegular, size: 14))
                    .foregroundColor(Color.appPurple)
            }
            Spacer()
            Button {
                completion(date)
            } label: {
                Text("date_picker_ok".ld())
                    .font(.custom(Font.rRegular, size: 14))
                    .foregroundColor(Color.appPurple)
            }
        }.padding(.horizontal)
        Spacer().frame(height: 50)
    }
    .frame(maxWidth: .infinity)
    .background(Color.appLightPurple)
    .padding(.bottom, -50)
}

Dava Brown · Answer 1 · 2023-04-27T20:21:06.910

I was having a similar problem and getting this console warning: "UICalendarView's height is smaller than it can render its content in; defaulting to the minimum height"

I found this answer to set the frame width. It's not optimal but seems to be solving my problem.

DatePicker(selection: $date, displayedComponents: .date)
   .datePickerStyle(.graphical)
   .frame(width: 320) // Bugfix for AutoLayout-Issue

score 0 · Answer 2 · answered Aug 29 '23 at 16:14

I have no idea why but setting the ID of the Date picker to the date being selected seems to fix this jumping issue:

    DatePicker("title", selection: $fromDate, displayedComponents: .date)
        .datePickerStyle(.graphical)
        .id(fromDate) // Magically stops it from jumping in size on first selection

SwiftUI Datepicker changes size when first time choosing a date

2 Answers2