How it works
DatePickerStyle is the protocol that defines the appearance and interaction behavior of a DatePicker. Rather than configuring a date picker's layout directly, you select one of the conforming styles SwiftUI provides and let it determine whether dates are entered through a compact field, a wheel, or a full calendar grid. This separates a picker's data binding from its presentation, so the same DatePicker can adapt to different contexts and platforms simply by swapping its style. Reach for it whenever the default style doesn't match the surrounding UI or the kind of date entry you want to offer.
Apply a style with datePickerStyle(_:)
You don't conform to DatePickerStyle yourself in everyday code; you apply one of the built-in conforming styles using the datePickerStyle(_:) modifier on a DatePicker or any view containing pickers. In the example, .datePickerStyle(.graphical) attaches the style to the DatePicker labeled "Departure".
Choose a concrete conforming style
SwiftUI ships several types that conform to DatePickerStyle, each exposed as a static convenience value: .graphical presents an interactive calendar and clock, .compact shows a tappable field that expands into a picker, .wheel uses spinning wheels, and .automatic defers to the platform default. The example uses .graphical to render a full calendar grid inline.
Pair the style with displayedComponents
The style governs how the picker looks, while the DatePicker's displayedComponents parameter governs which fields it offers. The two work together: here displayedComponents: .date limits entry to a calendar date, so the .graphical style draws a month grid without the time clock it would otherwise include.
Style flows down through the environment
datePickerStyle(_:) sets the style in the environment, so it applies to the DatePicker it's attached to and to any date pickers nested below it in the view hierarchy. This lets you set one style on a container and have every DatePicker inside it adopt the same appearance.
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 DatePickerStyleDemo: View {
@State private var date = Date()
var body: some View {
DatePicker("Departure", selection: $date, displayedComponents: .date)
.datePickerStyle(.graphical)
.padding()
}
}