title: SwiftUI: DatePicker/Date() formating
body: <p>I have a .sheet element, that acts as a form when a user is adding to a calendar. Everything works as expected, but as soon as they submit, and upload the Date, Start Time, and end time into firebase where it's held, I noticed a problem. The date and time were formated weird.</p>
  <p>My question is, how can I change the var scheduledate to a mm/dd/yy format when stored, and how can I change the var starttime and var endtime to a h:mm format when stored.</p>
  <p>Here's my code:</p>
  <pre><code>struct SheetView: View {
  
  var userEmail = Auth.auth().currentUser?.email
  @Environment(\.dismiss) var dismiss
  @State private var scheduledate = Date() //Store this as mm/dd/yy
  @State private var startTime = Date() //Store this as h:mm
  @State private var endTime = Date() //Store this as h:mm
  @State private var scheduleairplane = &quot;&quot;
  @State private var scheduleinstructor = &quot;&quot;
  
  var body: some View {
      VStack {
          HStack {
              Text(&quot;New Flight&quot;)
                  .font(.title)
                  .fontWeight(.bold)
              Spacer()
              Button(&quot;Cancel&quot;) {
                  dismiss()
              }
              
          }
          .padding()
          VStack {
              DatePicker(&quot;Date&quot;, selection: $scheduledate, displayedComponents: .date)
                  .datePickerStyle(GraphicalDatePickerStyle())
                  .frame(maxHeight: 400)
              DatePicker(&quot;Start Time&quot;, selection: $startTime, displayedComponents: .hourAndMinute)
                  .datePickerStyle(GraphicalDatePickerStyle())
                  .padding(.leading)
              DatePicker(&quot;End Time&quot;, selection: $endTime, displayedComponents: .hourAndMinute)
                  .datePickerStyle(GraphicalDatePickerStyle())
                  .padding(.leading)
          }
          VStack {
              TextField(&quot;Airplane...&quot;, text: self.$scheduleairplane)
                  .padding([.leading, .trailing])
                  .offset(x: 10)
                  .frame(height: 30)
                  .overlay(
                      RoundedRectangle(cornerRadius: 30)
                          .stroke(Color.white, lineWidth: 1)
                          .padding([.leading, .trailing])
                  )
              TextField(&quot;Instructor...&quot;, text: self.$scheduleinstructor)
                  .padding([.leading, .trailing])
                  .offset(x: 10)
                  .frame(height: 30)
                  .overlay(
                      RoundedRectangle(cornerRadius: 30)
                          .stroke(Color.white, lineWidth: 1)
                          .padding([.leading, .trailing])
                  )
          }
          
          Spacer(minLength: 0)
          Button(action: {
              let doc = db.collection(&quot;Scheduled&quot;).document(&quot;\(userEmail ?? &quot;Error&quot;)&quot;)
  
              // Atomically add a new region to the &quot;regions&quot; array field.
              doc.updateData([
                  &quot;Airplanes&quot;: FieldValue.arrayUnion([&quot;\(scheduleairplane)&quot;])
              ])
              doc.updateData([
                  &quot;Date&quot;: FieldValue.arrayUnion([&quot;\(scheduledate)&quot;])
              ])
              doc.updateData([
                  &quot;Time&quot;: FieldValue.arrayUnion([&quot;\(ScheduledTime)&quot;])
              ])
              doc.updateData([
                  &quot;Instructor&quot;: FieldValue.arrayUnion([&quot;\(scheduleinstructor)&quot;])
              ])
          }) {
              Text(&quot;Submit&quot;)
          }
          .foregroundColor(.white)
          .frame(width: 120, height: 45)
          .background(Color(&quot;Blue&quot;))
          .cornerRadius(30)
          .padding(.bottom)
           }
       }
   }
  </code></pre>