Skip to content

SwiftUI forms: DatePicker

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")
}


→ Here's my latest YouTube video

→ Get my Swift Handbook

→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter

JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025

Bootcamp 2025

Join the waiting list