NEW: Nominations are now open for the 2019 Swift Community Awards! >>

Selecting dates and times with DatePicker

Paul Hudson    @twostraws   

SwiftUI gives us a dedicated picker type called DatePicker that can be bound to a date property. Yes, Swift has a dedicated type for working with dates, and it’s called – unsurprisingly – Date.

So, to use it you’d start with an @State property such as this:

@State private var wakeUp = Date()

You could then bind that to a date picker like this:

var body: some View {
    DatePicker("Please enter a date", selection: $wakeUp)
}

Try running that in the simulator so you can see how it looks. You should see a spinning wheel with days and times, plus the “Please enter a date” label on the left.

Now, you might think that label looks ugly, and try replacing it with this:

DatePicker("", selection: $wakeUp)

But if you do that you now have two problems: the date picker still makes space for a label even though it’s empty, and now users with the screen reader active (more familiar to us as VoiceOver) won’t have any idea what the date picker is for.

There are two alternatives, both of which solve the problem.

First, we can wrap the DatePicker in a Form:

var body: some View {
    Form {
        DatePicker("Please enter a date", selection: $wakeUp)
    }
}

Just like a regular Picker this changes the way SwiftUI renders the view. We don’t get a new view being pushed onto a NavigationView this time, though; instead we get a single list row that folds out into a date picker when tapped.

This looks really nice, and combines the clean simplicity of forms with the familiar, wheel-based user interface of date pickers. Sadly, right now there are occasionally some glitches with the way these pickers are shown; we’ll get onto that later.

Rather than using forms, an alternative is to use the labelsHidden() modifier, like this:

var body: some View {
    DatePicker("Please enter a date", selection: $wakeUp)
        .labelsHidden()
}

That still includes the original label so screen readers can use it for VoiceOver, but now they aren’t visible onscreen any more – the date picker will take up all horizontal space on the screen.

Date pickers provide us with a couple of configuration options that control how they work. First, we can use displayedComponents to decide what kind of options users should see:

  • If you don’t provide this parameter, users see a day, hour, and minute.
  • If you use .date users see month, day, and year.
  • If you use .hourAndMinute users see just the hour and minute components.

So, we can select a precise time like this:

DatePicker("Please enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)

Finally, there’s an in parameter that works just the same as with Stepper: we can provide it with a date range, and the date picker will ensure the user can’t select beyond it.

Now, we’ve been using ranges for a while now, and you’re used to seeing things like 1 ... 5 or 0 ..< 10, but we can also use Swift dates with ranges. For example:

// when you create a new Date instance it will be set to the current date and time
let now = Date()

// create a second Date instance set to one day in seconds from now
let tomorrow = Date().addingTimeInterval(86400) 

// create a range from those two
let range = now ... tomorrow

That’s really useful with DatePicker, but there’s something even better: Swift lets us form one-sided ranges – ranges where we specify either the start or end but not both, leaving Swift to infer the other side.

For example, we could create a date picker like this:

DatePicker("Please enter a date", selection: $wakeUp, in: Date()...)

That will allow all dates in the future, but none in the past – read it as “from the current date up to anything.”

LEARN SWIFTUI FOR FREE I have a massive, free SwiftUI video collection on YouTube teaching you how to build complete apps with SwiftUI – check it out!

MASTER SWIFT NOW
Buy Testing Swift Buy Practical iOS 12 Buy Pro Swift Buy Swift Design Patterns Buy Swift Coding Challenges Buy Server-Side Swift (Vapor Edition) Buy Server-Side Swift (Kitura Edition) Buy Hacking with macOS Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with Swift Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Beyond Code

Was this page useful? Let us know!

Average rating: 4.8/5