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.

1. I didn’t understand why its changing that formate.
2. I want to send dates to server after submitting the button with format 2021-07-25
3. 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.!!

Answer 1

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