Skip to content

SwiftUI forms: DatePicker

New Course Coming Soon:

Get Really Good at Git

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

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!
→ Get my Swift Handbook

Here is how can I help you: