How it works
WheelDatePickerStyle presents a DatePicker as one or more spinning wheels, the scrolling rotary control familiar from iOS date and time entry. It conforms to DatePickerStyle, so you don't instantiate it directly; instead you select it through the datePickerStyle(_:) modifier using the static .wheel accessor. Reach for it when you want a compact, always-visible picker that keeps the selectable values in view and lets people flick through them in place, rather than expanding a calendar or revealing a sheet.
Bind the selection to a Date state
A DatePicker is a value-editing control, so it needs a two-way binding to the date it edits. Here the picker is driven by
@State private var date = Date(), passed asselection: $date; the wheel writes each scrolled value straight back into that state.Apply the style with .datePickerStyle(.wheel)
The
datePickerStyle(_:)modifier sets the presentation for the DatePicker in its view subtree. Passing the.wheelshorthand resolves to a WheelDatePickerStyle instance, which is what turnsDatePicker("Departure", selection: $date)into spinning wheels instead of the default compact field.Limit the wheels with displayedComponents
WheelDatePickerStyle renders one wheel per component the picker exposes. The
displayedComponents: .dateargument restricts editing to the calendar date, so only month, day, and year wheels appear; switching it to.hourAndMinutewould instead spin a clock, and omitting it shows both.Provide the label and let it inform accessibility
The first argument, the
"Departure"title, names the control. With the wheel style the label is typically not drawn beside the spinning wheels, but it still describes the picker to VoiceOver, so it's worth keeping meaningful even when visually understated.
displayedComponents: .date to .hourAndMinute and watch the month/day/year wheels become hour and minute wheels.Example & preview
Press Run live & edit to compile it in your browser — then edit the Swift on the left and the preview re-renders live.
struct WheelDatePickerStyleDemo: View {
@State private var date = Date()
var body: some View {
DatePicker("Departure", selection: $date, displayedComponents: .date)
.datePickerStyle(.wheel)
.padding()
}
}