Swift iOS14 Datepicker Text Alignment

Change text alignment of DatePicker in SwiftUI 2.0 iOS 14

Here is possible solution. Tested with Xcode 12 / iOS 14

DatePicker(selection: $birthDate, in: ...Date().stripTime(), displayedComponents: .date) {
      Text("Birthday").frame(maxWidth: .infinity, alignment: .trailing)
}.fixedSize().frame(maxWidth: .infinity, alignment: .trailing)

Update:

HStack {
    Text("Birthday")
    Spacer()
    DatePicker("", selection: $birthDate, in: ...Date().stripTime(), displayedComponents: .date)
        .fixedSize()
}

UIDatePicker rendering is getting right aligned in Xcode 13 (iOS 15)

Just a quick follow-up on this – I submitted this issue via Feedback Assistant and Apple told me this is expected behavior:

Engineering has provided the following information regarding this
issue:

This is intentional and not a bug. We right-align the UIDatePicker
pills for compact. Please know that if you want to change the
alignment of the UIDatePicker controls on iOS 15, we now support
UIControl.contentHorizontalAlignment to do just that.

So the proper solution is as follows:

datePicker.contentHorizontalAlignment = .left

Change the text alignment for Eureka TextRow

For Eureka is a little different. You have to use cell update callback. It wasn't well documented about changing alignment. But it did mention here that to change color or font you will have to use the .cellUpdate. Thus, i believe this work will work for you:

let row = TextRow() {
    row.title = "Field:"
}.cellUpdate { cell, row in
    cell.textField.textAlignment = .left
}

Anyone find that UIDatePicker is broken under iOS 14?

To add some additional information to Oscar's answer...

UIDatePicker now has three different styles, as per documentation here and here. The date picker's style is accessible by the .preferredDatePickerStyle property which can be set to four different cases:

1. .automatic - A style indicating that the system picks the concrete style based on the current platform and date picker mode.
2. .compact - A style indicating that the date picker displays as a label that when tapped displays a calendar-style editor.
3. .inline - A style indicating that the date pickers displays as an inline, editable field.
4. .wheels - A style indicating that the date picker displays as a wheel picker.

If you want things to look how they did pre iOS 14, stick with the .wheels style. It is also worth noting that not all styles can accommodate all date and time settings, hence why you can only set a preferred style.

Lastly, this property is only available in iOS 13.4 or newer, so you will have to accomplish version control with something like:

if #available(iOS 13.4, *) {
    yourDatePicker.preferredDatePickerStyle = UIDatePickerStyle.automatic
} else {
    // Fallback on earlier versions
}

---

Related Topics