How to create a Date Picker in SwiftUI

Photo by Daria Shevtsova on Unsplash

Use a DatePicker when creating a view that enables users to choose both a calendar date and, if needed, a specific time.

In SwiftUI, you can use the DatePicker view to create a date picker. Here's an example of how to create a date picker and read values from it in SwiftUI:

import SwiftUI

struct ContentView: View {

    @State private var selectedDate = Date()

    var body: some View {
        VStack {
            DatePicker("Select a date", selection: $selectedDate, in: ...Date(), displayedComponents: [.date, .hourAndMinute])
                .datePickerStyle(WheelDatePickerStyle())
                .labelsHidden()

            Text("Selected date: \(formattedDate)")
                .padding()
        }
    }

    private var formattedDate: String {
        let dateFormatter = DateFormatter()
        dateFormatter.dateFormat = "yyyy-MM-dd HH:mm:ss" // Choose your desired format
        return dateFormatter.string(from: selectedDate)
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Explanation:

1. @State private var selectedDate = Date(): This declares a state variable to store the selected date.
2. DatePicker: This is the SwiftUI view for the date picker. The selection parameter binds the selected date to the…