DatePicker is a control in SwiftUI which enables you to input (by selection) date and time values. In order to properly use a DatePicker, you need to back it with a State variable storing the selected date. This tutorial shows you how to create and use a DatePicker in SwiftUI.
In its simplest form, a DatePicker can be created like this:
struct ContentView: View {
@State var selectedDate = Date()
var body: some View {
VStack {
DatePicker("", selection: $selectedDate, displayedComponents: .date)
Text("Your selected date: \(selectedDate)")
}.padding()
}
}
The result is presented below. It works as expected but it takes up a large chunk of screen. In the next section we’re going to fix it by placing the DatePicker in a Form.

DatePicker in a Form
A Form in SwiftUI is a container view which allows you to group controls used for data entry. By wrapping the DatePicker in a From, we’re giving it extra functionality – the date picker now becomes a single horizontal row with selected value in it. Tapping on the date picker row, reveals a DatePicker interface below it, and allows you to pick a date. Confirm a selection by tapping on the date picker row again to hide the selection interface.
Let’s take a look at the code. Update the body of your ContentView to reflect the new functionality:
var body: some View {
Form {
DatePicker("When is your birthday?", selection: $selectedDate, displayedComponents: .date)
}
}
The result looks like this:

Pick Date and Time
In order to be able to select a date along with a time in the DatePicker, update the displayedComponents argument to include [.date, .hourAndMinute]:
DatePicker("Select event date and time", selection: $selectedDate, displayedComponents: [.date, .hourAndMinute])
The result looks like this:

It is also possible to allow time selection only by keeping .hourAndMinute as the only argument to displayedComponents.
Restrict dates by range
DatePicker lets you restrict the dates from a picker by using either a closed range or partial range. A closed range restricts both upper and lower date selection, whereas a partial range only restricts an upper or a lower bound of the selection. Let’s take a look how it works in practice.
Below example is using a ClosedRange to restrict date selection between two points in time, one five days ago and one two days ago. Note the added in: parameter to the DatePicker initializer:
struct ContentView: View {
@State var selectedDate = Date()
var closedRange: ClosedRange<Date> {
let twoDaysAgo = Calendar.current.date(byAdding: .day, value: -2, to: Date())!
let fiveDaysAgo = Calendar.current.date(byAdding: .day, value: -5, to: Date())!
return fiveDaysAgo...twoDaysAgo
}
var body: some View {
Form {
DatePicker("Select event date and time", selection: $selectedDate, in: closedRange, displayedComponents: .date)
}
}
}
You can use a partial range to, for example restrict date selection up to today (so only allowing to pick dates from the past). The DatePicker initializer will now look like this:
DatePicker("Select event date and time", selection: $selectedDate, in: ...Date(), displayedComponents: .date)
In order to allow selection of future dates only, use the following range:
DatePicker("Select event date and time", selection: $selectedDate, in: Date()..., displayedComponents: .date)
Related tutorials:
- SwiftUI Form tutorial – how to create and use Form in SwiftUI
- SwiftUI stepper tutorial – how to create and use stepper in SwiftUI
- SwiftUI slider tutorial – how to create and use slider in SwiftUI
- How to create and use Picker with Form in SwiftUI