How it works
GraphicalDatePickerStyle is a concrete DatePickerStyle that renders a DatePicker as a full interactive calendar surface — a month grid for choosing days and, where date and time components are shown together, wheel controls for the time. Reach for it when you want the date selection to be a prominent, browsable part of the screen rather than a compact field, such as a scheduling pane or a date-driven detail view. You don't instantiate the type directly; you apply it through the datePickerStyle(_:) modifier using the .graphical shorthand.
Start from a bound DatePicker
GraphicalDatePickerStyleonly changes how an existingDatePickeris drawn, so you first need a picker bound to a date value. HereDatePicker("Event Date", selection: $date, displayedComponents: .date)reads and writes the@State private var date = Date()through the$datebinding.Apply the style with .datePickerStyle(.graphical)
The
datePickerStyle(_:)modifier sets the presentation for the picker and any descendant pickers. Passing.graphicalselectsGraphicalDatePickerStyle, swapping the default compact field for the expanded calendar layout — that single.datePickerStyle(.graphical)call is what activates this symbol.Control what the calendar shows with displayedComponents
The
displayedComponentsargument decides whether the graphical picker presents a calendar, time wheels, or both. Because thisDatePickerpassesdisplayedComponents: .date, the style renders just the month grid; including.hourAndMinutewould add the time controls beneath it.Give the calendar room to lay out
The graphical style needs more space than a compact field, so it expects to sit in a container that grants it room. The trailing
.padding()insets the calendar from the surrounding view, which is whereGraphicalDatePickerStyleplugs into the layout.
displayedComponents: .date to displayedComponents: [.date, .hourAndMinute] to see GraphicalDatePickerStyle add time wheels below the calendar grid.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 GraphicalDatePickerStyleDemo: View {
@State private var date = Date()
var body: some View {
DatePicker("Event Date", selection: $date, displayedComponents: .date)
.datePickerStyle(.graphical)
.padding()
}
}