SwiftUI offers us a devoted picker kind referred to as DatePicker that can be certain to a date property. Yes, Swift has a committed kind for working with dates, and it’s known as – unsurprisingly – Date.

So, to use it you’d begin 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 going for walks that in the simulator so you can see how it looks. You must see a spinning wheel with days and times, plus the “Please enter a date” label on the left.

Now, you may suppose that label appears ugly, and attempt changing it with this:

DatePicker("", selection: $wakeUp)

But if you do that you now have two problems: the date picker nevertheless makes area for a label even although it’s empty, and now customers with the display reader energetic (more acquainted to us as VoiceOver) won’t have any concept what the date picker is for.

There are two alternatives, each of which resolve 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 ordinary Picker this modifications the way SwiftUI renders the view. We don’t get a new view being pushed onto a NavigationView this time, though; as an alternative we get a single listing row that folds out into a date picker when tapped.

This appears truely nice, and combines the smooth simplicity of types with the familiar, wheel-based consumer interface of date pickers. Sadly, proper now there are every so often some system defects with the way these pickers are shown; we’ll get onto that later.

Rather than the use of forms, an choice is to use the labelsHidden() modifier, like this:var body: some View { DatePicker("Please enter a date", selection: $wakeUp) .labelsHidden() }

That nonetheless consists of the unique label so display screen readers can use it for VoiceOver, however now they aren’t seen onscreen any greater – the date picker will take up all horizontal area on the screen.

Date pickers furnish us with a couple of configuration preferences that manage how they work. First, we can use displayedComponents to figure out what form of selections customers must see:

If you don’t furnish this parameter, customers see a day, hour, and minute.
If you use .date customers see month, day, and year.
If you use .hourAndMinute customers see simply the hour and minute components.
So, we can pick a particular time like this:DatePicker("Please enter a time", selection: $wakeUp, displayedComponents: .hourAndMinute)

Finally, there’s an in parameter that works simply the identical as with Stepper: we can furnish it with a date range, and the date picker will make sure the consumer can’t pick out past it.

Now, we’ve been the use of degrees for a whilst now, and you’re used to seeing matters like 1 ... 5 or zero ..< 10, however we can additionally 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 honestly beneficial with DatePicker, however there’s some thing even better: Swift lets us form one-sided levels – stages the place we specify both the begin or give up however now not both, leaving Swift to infer the different side.

For example, we ought to 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.”