SwiftUI DatePicker not acting as expcted

Question

I need to show two dates as showing in the screenshot fromDate & toDate. I'm getting some UI issue after selecting date from first component showing date on screen Jul 1, 2021 but after selecting date from second date picker its atomically changing formate to 7/31/2021.

I didn’t understand why its changing that formate.
I want to send dates to server after submitting the button with format 2021-07-25
Layout also not working as expected.

class ViewModel: ObservableObject {
    @Published var fromDate = Date()
    @Published var toDate = Date()
}

struct ContentView: View {
    @State var fromDate = Date()
    @State var toDate = Date()

    @ObservedObject var viewModel = ViewModel()
    
    var body: some View {
        VStack {
            HStack {
                VStack {
                    Text("From Date").padding(.horizontal).frame(maxWidth: .infinity, alignment: .leading)
                    DatePicker("", selection: $viewModel.fromDate, displayedComponents: [.date])
                        .labelsHidden()
                        .fixedSize().frame(maxWidth: .infinity, alignment: .leading)
                }
                VStack {
                    Text("To Date").padding(.horizontal).frame(maxWidth: .infinity, alignment: .leading)
                    DatePicker("", selection: $viewModel.toDate, displayedComponents: [.date])
                        .labelsHidden()
                        .fixedSize().frame(maxWidth: .infinity, alignment: .leading)
                }
                
            }.padding()
            Button(action: {
                print("\(viewModel.fromDate), \(viewModel.toDate)")
                //TODO: expected formate is 2021-02-25
            }, label: {
                Text("Submit")
            })
        }
    }
}

Screenshot

Thanks in advance.!!

Does this answer your question? [SwiftUI DatePicker jumps between short and medium date formats when changing the date](https://stackoverflow.com/questions/66090210/swiftui-datepicker-jumps-between-short-and-medium-date-formats-when-changing-the) — jnpdx, Jul 20 '21 at 20:26
This seems to be a bug with DatePicker. As the comment above links to, there have been other discussions on this bug. If you decide to add an `.id()` modifier to the picker, it will force to picker to rebuild every time the date changes. This isn't a big issue except if you're using the graphical datepicker style, in which every time you change any aspect of the date (day, month, year, etc.) the picker will close as it is being rebuilt. As for your other formatting question, I would look into DateFormatters. — Hackinator, Jul 20 '21 at 20:48

score 1 · Answer 1 · answered Aug 23 '22 at 10:38

I had same issue and it even crashed for me, I found this answer: I simply added .id() and inside the parenthesis put the date variable that the date picker sends the changing dates to:

DatePicker("", selection: $viewModel.fromDate, displayedComponents: [.date])
    .labelsHidden()
    .fixedSize()
    .frame(maxWidth: .infinity, alignment: .leading)
    .id(viewModel.fromDate)  // <-- Like so
            
DatePicker("", selection: $viewModel.toDate, displayedComponents: [.date])
    .labelsHidden()
    .fixedSize()
    .frame(maxWidth: .infinity, alignment: .leading)
    .id(viewModel.toDate) // <-- Like so

SwiftUI DatePicker not acting as expcted

1 Answers1