Change selected date format from DatePicker SwiftUI

Question

Is there a way to format the date?(from the position indicated by the arrow in the picture) I know it is formatted based on the locale but is there a way to format it myself?

struct ContentView: View {

    @State private var selectedDate = Date()

    var body: some View {
        Form {

            DatePicker(selection: $selectedDate, in: ...Date(), displayedComponents: .date) {
                Text("From*")
            }
        }
    }
}

What do you mean formatted by yourself? You already have a `Date` named `selectedDate`. — E.Coms, Nov 26 '19 at 18:02
I assume the OP means they'd like to format it as, for example **26th November 2019**, instead of **26.11.19** — Ashley Mills, Nov 26 '19 at 19:08

score 4 · Accepted Answer · edited Sep 09 '21 at 12:22

The only way I could figure to accomplish this is to create my own custom DatePicker view and use onAppear on the TextField to update an @State selectedDateText: String variable for displaying in the TextField. This feels like a hack and I’m almost embarrassed to post it but it works. I’m new at Swift and iOS programming in general so I’m sure someone will come along with a better answer so I’ll offer this for what it’s worth. My custom view is something like this:

struct CustomDatePicker: View {
  @Binding var date: Date

  @State private var showPicker: Bool = false
  @State private var selectedDateText: String = "Date"

  private var selectedDate: Binding<Date> {
    Binding<Date>(get: { self.date}, set : {
        self.date = $0
        self.setDateString()
    })
  } // This private var I found… somewhere. I wish I could remember where

  // To take the selected date and store it as a string for the text field
  private func setDateString() {
    let formatter = DateFormatter()
    formatter.dateFormat = "MMMM dd, yyyy"

    self.selectedDateText = formatter.string(from: self.date)
  }

  var body: some View {
    VStack {
        HStack {
            Text("Date:")
                .frame(alignment: .leading)
            
            TextField("", text: $selectedDateText)
                .onAppear() {
                    self.setDateString()
                }
                .disabled(true)
                .onTapGesture {
                    self.showPicker.toggle()
                }
            .multilineTextAlignment(.trailing)
        }            
        
        if showPicker {
            DatePicker("", selection: selectedDate,
            displayedComponents: .date)
            .datePickerStyle(WheelDatePickerStyle())
            .labelsHidden()
        }
    }
  }
}

EDIT: I figured out where I got the private var code. It was from this post: How to detect a value change of a Datepicker using SwiftUI and Combine?

Chris, I choose this as a solution, even though I think it won't work if placed in a Form because in a Form DatePicker already has attached to it that part that you've build with the HStack — Claudiu, Dec 06 '19 at 14:08
@Chris If i use the above answer and i placed CustomDatePicker() as a swift file, how would i call it properly in MyApp.swift file? When i put CustomDatePicker() - gives me this error: Missing argument for parameter 'date' in call. - When i press fix - it shows me this CustomDatePicker(date: <#Binding#>) --> How would i fix this? — LizG, Dec 12 '20 at 12:12

Change selected date format from DatePicker SwiftUI

1 Answers1

Linked