Structure¶
DatePicker¶
A picker control for selecting dates.¶
Declaration¶
struct DatePicker<Label> : View where Label : View
Overview¶
You create a picker by providing 3 things:
- a selection binding
- a label
- the editable parts of the Date
There are four types of pickers, and three types of labels, making 12 total initializers.
Picker types:
- Unlimited range
- Closed range (maximum and minimum)
- From range (minimum only)
- Through range (maximum only)
Label types:
A simple example looks like this:
struct DatePickerView: View {
@State private var date = Date()
var body: some View {
DatePicker("Date", selection: $date)
}
}

You can limit the DatePicker to specific ranges of dates, allowing selections only before or after a certain date, or between two dates. The following example shows a date-and-time picker that only permits selections within the year 2021 (in the UTC time zone).
struct ContentView: View { @State private var date = Date()
let dateRange: ClosedRange<Date> = {
let calendar = Calendar.current
let startComponents = DateComponents(year: 2021, month: 1, day: 1)
let endComponents = DateComponents(year: 2021, month: 12, day: 31, hour: 23, minute: 59, second: 59)
return calendar.date(from:startComponents)!
...
calendar.date(from:endComponents)!
}()
var body: some View {
DatePicker(
"Start Date",
selection: $date,
in: dateRange,
displayedComponents: [.date, .hourAndMinute]
)
}
Styling Date Pickers¶
You can customize the appearance and interaction of date pickers using one of the DatePickerStyles provided by SwiftUI. The full list of styles is:
- DefaultDatePickerStyle (iOS and macOS)
- WheelDatePickerStyle (iOS)
- GraphicalDatePickerStyle (iOS and macOS)
- CompactDatePickerStyle (iOS and macOS)
- FieldDatePickerStyle (macOS)
- StepperFieldDatePickerStyle (macOS)
Currently, you cannot create your own custom DatePickerStyle.
To set a specific style for all picker instances within a view, use the datePickerStyle(_:) modifier.
struct StyledDatePickerView: View {
@State private var date = Date()
var body: some View {
DatePicker(selection: $date, label: { Text("Date") })
.datePickerStyle(WheelDatePickerStyle())
}
}

Availability¶
iOS 13.0+
macOS 10.15+
Topics¶
Initializer¶
init(_:selection:displayedComponents:) Creates a date picker with unlimited range and a string label.
init(_:selection:displayedComponents:) Creates a date picker with unlimited range and a localized string key label.
init(_:selection:in:displayedComponents:) Creates a date picker with closed range and a localized string key label.
init(_:selection:in:displayedComponents:) Creates a date picker with "from" range and a localized string key label.
init(_:selection:in:displayedComponents:) Creates a date picker with closed range and a string label.
init(_:selection:in:displayedComponents:) Creates a date picker with "through" range and a string label.
init(_:selection:in:displayedComponents:) Creates a date picker with "through" range and a localized string key label.
init(_:selection:in:displayedComponents:) Creates a date picker with "from" range and a string label.
init(selection:displayedComponents:label:) Creates a date picker with unlimited range and a View label.
init(selection:in:displayedComponents:label:) Creates a date picker with closed range and a View label.
init(selection:in:displayedComponents:label:) Creates a date picker with "through" range and a View label.
init(selection:in:displayedComponents:label:) Creates a date picker with "from" range and a View label.
Instance Property¶
body The content and behavior of the view.
Type Alias¶
Body The type of view representing the body of this view.
Components A type alias for the DatePickerComponents option set used in DatePicker.