pickers 

18 Apr 2023

In this post we will see how to create a simple Date Picker in SwiftUI. Let’s create a @State variable that will keep track of the current selected date.

@State var departureDate = Date()

We will next initialize the DatePicker and pass in the departureDate

DatePicker("Departure Date", selection: $departureDate,
                      displayedComponents: [.date])

Date Picker

If you want to display the time along with the date you would pass both date and hourAndMinute to the displayedComponents parameter.

DatePicker("Departure Date", selection: $departureDate,
                      displayedComponents: [.date, .hourAndMinute])

If you want to perform any action after a new departure date is selected by the user you can apply the .onChange modifier and capture the newly selected date.

DatePicker("Departure Date", selection: $departureDate,
           displayedComponents: [.date]).onChange(of: departureDate) { newValue in
    print("Departure date: \(newValue)") // The new selected departure date will be printed.
}

You can also change the style of the DatePicker by applying the .datePickerStyle modifier. There are different styles available like .wheel, .graphical, .compact and .automatic.