iOS26 SwiftUI DatePicker giving unreliable/inconsistent date formatting

2 weeks ago 15
ARTICLE AD BOX

I have a ForEach inside of a List where I display an airport TextField and an arrival time as a .compact DatePicker inside of a HStack. When iOS18 was around, this worked perfectly consistently and displayed date in dd MMM yyyy format. With iOS26 this gets completely messed up. Here is my MRE:

import SwiftUI struct EditableFlightSegment: Identifiable, Equatable { let id = UUID() var airport: String var time: String var date: Date } extension Date { static var random: Date { let now = Date() let randomOffset = TimeInterval(Int.random(in: -1_000_000...1_000_000)) return now.addingTimeInterval(randomOffset) } } class MockPDFImportCoordinator: ObservableObject { @Published var arrivalSegments: [EditableFlightSegment] = [ EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "09:45", date: Date.random), EditableFlightSegment(airport: "ABCD", time: "13:10", date: Date.random) ] } struct RosterImportView: View { @ObservedObject var pdfImportCoordinator = MockPDFImportCoordinator() @State private var narrowView = false @FocusState private var isFocused: Bool var body: some View { VStack { List { Button("Add Sector") { let newSegment = EditableFlightSegment(airport: "", time: "", date: Date()) pdfImportCoordinator.arrivalSegments.insert(newSegment, at: 0) } .foregroundStyle(.mint) .listRowBackground(Color.clear) ForEach($pdfImportCoordinator.arrivalSegments) { $segment in HStack { TextField("Airport", text: $segment.airport) .textInputAutocapitalization(.characters) .disableAutocorrection(true) .focused($isFocused) .padding() .overlay( RoundedRectangle(cornerRadius: 8) .stroke(Color.gray, lineWidth: 1) ) DatePicker( "Date & Time", selection: $segment.date, displayedComponents: [.date, .hourAndMinute] ) .labelsHidden() .datePickerStyle(.compact) .padding() } .listRowBackground(Color.clear) } } } } } struct ContentView: View { @State private var showSheet: Bool = false var body: some View { NavigationStack { VStack { Button(action: { showSheet = true }, label: { Text("Show List") }) } .sheet(isPresented: $showSheet) { RosterImportView() .presentationSizing( .page .fitted(horizontal: false, vertical: false) .sticky(horizontal: false, vertical: false)) .presentationDragIndicator(.visible) .ignoresSafeArea(.keyboard, edges: .bottom) } } } }

I have tried adding the .locale and have struggled finding ways to format the date display otherwise. I don't want to use other picker styles (though I have tried). I have read that iOS26 will adjust the formatting based on space available etc. so I have tried forcing .frame size as well, which has no effect. I have also made sure the date format passed into the DatePicker through $segment.date is consistent.

I have found that when the List of dates runs off the bottom of the screen (so when the list of airport/time combos is longer) the problem is exacerbated. In this scenario, I can very slowly scroll down and the date formatting stays relatively consistent at dd MMM yyyy. But with a fast scroll the date format changes to dd/MM/yyyy. I can also navigate away and back to this view and the formatting has reset to dd MMM yyyy... Conversely, when the list of airport/time combos is short (say only 4 long) the date formatting stays dd MMM yyyy. I have also found that adding random dates causes it to change formatting.

This is super weird behavior. Is there anything I can do to keep the formatting consistent without using Text to display the time? I want to keep it as a DatePicker.

Read Entire Article