DatePicker with graphical style breaks layout constraints on iOS 16.0

Question

The following code breaks the layout constraints when running on Xcode-14.0.0-Beta 5 with iOS 16.0

struct ContentView: View {
    
    @State var date = Date()
    
    var body: some View {
        DatePicker(selection: $date, displayedComponents: .date, label: { EmptyView() })
            .datePickerStyle(.graphical)
    }
}

Any suggestions how to fix or hide the warning?

Console warning:

2022-08-24 17:16:40.471325+0300 DatePickerProblem[77364:483284] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSAutoresizingMaskLayoutConstraint:0x600003559180 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.height == 0 (active)>", "<NSLayoutConstraint:0x60000352bca0 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)>", "<NSLayoutConstraint:0x60000352bcf0 V:|-(>=0)-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0] (active, names: '|':_UIDatePickerCalendarTimeView:0x7fe15c322520 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60000352bca0 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 2022-08-24 17:16:40.471971+0300 DatePickerProblem[77364:483284] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<NSAutoresizingMaskLayoutConstraint:0x600003559180 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.height == 0 (active)>", "<NSLayoutConstraint:0x60000352bd40 UILabel:0x7fe15c324d00.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)>", "<NSLayoutConstraint:0x60000352bd90 V:|-(>=0)-[UILabel:0x7fe15c324d00] (active, names: '|':_UIDatePickerCalendarTimeView:0x7fe15c322520 )>" ) Will attempt to recover by breaking constraint <NSLayoutConstraint:0x60000352bd40 UILabel:0x7fe15c324d00.centerY == _UIDatePickerCalendarTimeView:0x7fe15c322520.centerY - 1 (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 2022-08-24 17:16:40.478778+0300 DatePickerProblem[77364:483284] [LayoutConstraints] Unable to simultaneously satisfy constraints. Probably at least one of the constraints in the following list is one you don't want. Try this: (1) look at each constraint and try to figure out which you don't expect; (2) find the code that added the unwanted constraint or constraints and fix it. (Note: If you're seeing NSAutoresizingMaskLayoutConstraints that you don't understand, refer to the documentation for the UIView property translatesAutoresizingMaskIntoConstraints) ( "<_UISystemBaselineConstraint:0x60000355c190 H:[UILabel:0x7fe15c324d00]-(>=NSLayoutAnchorConstraintSpace(8))-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0] (active)>", "<NSAutoresizingMaskLayoutConstraint:0x6000035590e0 h=--& v=--& _UIDatePickerCalendarTimeView:0x7fe15c322520.width == 0 (active)>", "<NSLayoutConstraint:0x60000352bf20 UILabel:0x7fe15c324d00.leading == UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide'.leading (active)>", "<NSLayoutConstraint:0x60000355c230 _UIDatePickerCompactTimeLabel:0x7fe15c322bc0.trailing == UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide'.trailing (active)>", "<NSLayoutConstraint:0x60000352be30 'UIView-leftMargin-guide-constraint' H:|-(8)-UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide' (active, names: '|':_UIDatePickerCalendarTimeView:0x7fe15c322520 )>", "<NSLayoutConstraint:0x60000352bed0 'UIView-rightMargin-guide-constraint' H:[UILayoutGuide:0x600002f06760'UIViewLayoutMarginsGuide']-(8)-|(LTR) (active, names: '|':_UIDatePickerCalendarTimeView:0x7fe15c322520 )>" ) Will attempt to recover by breaking constraint <_UISystemBaselineConstraint:0x60000355c190 H:[UILabel:0x7fe15c324d00]-(>=NSLayoutAnchorConstraintSpace(8))-[_UIDatePickerCompactTimeLabel:0x7fe15c322bc0] (active)> Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger. The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful. 2022-08-24 17:16:40.512015+0300 DatePickerProblem[77364:483284] [UICalendarView] UICalendarView's height is smaller than it can render its content in; defaulting to the minimum height. 2022-08-24 17:16:40.548888+0300 DatePickerProblem[77364:483284] [UICalendarView] UICalendarView's height is smaller than it can render its content in; defaulting to the minimum height.

Fley

Answer 1

It seems that the new underlying UICalendarView has some AutoLayout Issues when used by its SwiftUI DatePicker wrapper.

You can see this even better, when you enable the Time Component too (displayedComponents: [.date, .hourAndMinute]). This gives a much longer Auto-Layout warning about the time label constraint being broken.

For me this happens especially when the SwiftUI View is embedded using an UIHostingController which is pushed onto a Navigation Stack.

In my case, I was able to fix it by giving the DatePicker its default width as its frame width:

struct ContentView: View {
    
    @State var date = Date()
    
    var body: some View {
        DatePicker(
            selection: $date, 
            displayedComponents: [.date, .hourAndMinute], 
            label: { EmptyView() }
        )
        .datePickerStyle(.graphical)
        .frame(width: 320) // Bugfix for AutoLayout-Issue
    }

}

Expenditure

I've had a similar issue with DatePicker and it resizing when a date is selected: #74876826 I added your .frame(width: 320) code and it fixes it — but why does it only work when the width is set to 320 (ideally I'd like a slightly wider width)? – Alitaalitha

@Alitaalitha Glad it fixes your problem, too. Indeed that looks related. The reason is that the component itself determines its size or has its own constants which equal 320 here. Unfortunately, there are components where an adjustment of the size is not provided for, so you can't make it wider without breaking the underlying layout constraints. – Expenditure

Answer 2

struct ContentView: View {

@State var date = Date()

var body: some View {
    DatePicker(selection: $date, displayedComponents: .date, label: { EmptyView() })
        .datePickerStyle(.graphical)
        .padding()
}

.padding() stopped warning for me.

Penrod

Answer 3

as the others have said, set

.frame(width: 320)

// Then change size accordingly with

.scaleEffect(1.25) // or what ever you need to do with it.

Crooks

Hello and welcome to Stack Overflow, please post an answer that is not posted yet - if you do not have anything new to add that hasn't already been posted, please do not post an answer with the same answer as someone else. – Emptor