SwiftUI forms: DatePicker

By Flavio Copes

Learn how to use the DatePicker control in SwiftUI to let users pick a date and time, and how displayedComponents limits it to just the date or time.

The DatePicker form control in SwiftUI lets us create a .. date picker.

How does it work?

First we create a property of type Date:

@State private var dateChosen = Date()

We use @State so that we can modify this value from our DatePicker view

Then we link that property to the DatePicker view:

DatePicker(selection: $dateChosen, in: ...Date()) {
    Text("Pick a date and time")
}

Here’s how it looks:

Tapping on each different part (date or time) will show a dedicate picker UI element:

Here’s the full code of this example:

struct ContentView: View {
    @State private var dateChosen = Date()

    var body: some View {
        Form {
            DatePicker(selection: $dateChosen, in: ...Date()) {
                Text("Pick a date and time")
            }
        }
    }
}

You can choose to only show one particular element of the date with the displayedComponents property, like just the date:

DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .date) {
    Text("Pick a date and time")
}

or just the time:

DatePicker(selection: $dateChosen, in: ...Date(), displayedComponents: .hourAndMinute) {
    Text("Pick a date and time")
}

Related posts about swift: