Center alignment of DatePicker in SwiftUI iOS 14

Question

I have a DatePicker of GraphicalDatePickerStyle and I want to center it inside a rectangle. My code:

HStack {
        Spacer()
        DatePicker("", selection: $notificationTimeOnPicker, displayedComponents: .hourAndMinute).foregroundColor(Color("ChartColor")).labelsHidden()
                                .datePickerStyle(GraphicalDatePickerStyle())
        Spacer()
                            
        }

This is what I get and want:

How do I center my DatePicker? Looks like its frame is wide for some unknown reason. I tried changing its frame size to width: 95 or less to center it but after that I get ... instead of numbers when typing on some devices.

this might help https://stackoverflow.com/a/62274156/2303865 — Leo Dabus, Oct 14 '20 at 14:18

score 6 · Answer 1 · answered Nov 01 '20 at 16:02

It seem works only with CompactDatePickerStyle

DatePicker("", selection: $notificationTimeOnPicker, displayedComponents: .hourAndMinute)
    .foregroundColor(Color("ChartColor"))           
    .datePickerStyle(CompactDatePickerStyle())
    .clipped()
    .labelsHidden()

score 0 · Answer 2 · answered May 13 '21 at 11:26

The compact style was too small and the behaviour was strange for my requirements, so I reasonably hard coded the size considering accessibility as well:

struct ContentView: View {
    @Environment(\.sizeCategory) private var sizeCategory

    var body: some View {
            DatePicker("Select a time", selection: .constant(Date()), displayedComponents: .hourAndMinute)
                .datePickerStyle(GraphicalDatePickerStyle())
                .labelsHidden()
                .frame(maxWidth: CGFloat(sizeCategory.isAccessibilityCategory ? 235 : 200))
    }
}

The nice thing is SwiftUI dynamically squeezes / expands the picker to fit the width instead of clipping it.

score 0 · Answer 3 · answered Apr 14 '23 at 15:02

0

This works for me:

DatePicker("", selection: $date, displayedComponents: .date)
    .datePickerStyle(.graphical)
    .labelsHidden()
    .scaledToFit()

answered Apr 14 '23 at 15:02

Tecalto

21
2

score -1 · Answer 4 · answered May 11 '21 at 11:54

Solution for UIKit

After several Google searches, I kept finding this post at the top of the results page, so I'm just going to answer here even though it doesn't exactly relate to the OP question, feel free to punish me ;).

Given this structure in Interface Builder:

In your View Controller, connect the Picker using an IBOutlet to access it programatically.

@IBOutlet weak var expirationDate: UIDatePicker!

And finally either in viewWillLayoutSubviews() or viewDidLayoutSubviews() put the following code:

override func viewWillLayoutSubviews() {
    super.viewWillLayoutSubviews()

    if let viewPicker = expirationDate.subviews.first?.subviews.first {
        // Force the date picker to be centered
        viewPicker.center.x = expirationDate.subviews.first!.center.x
    }
}

Hope you find it useful!

Center alignment of DatePicker in SwiftUI iOS 14

4 Answers4

Solution for UIKit