How it works
CompactDatePickerStyle is the date-picker style that renders a DatePicker as a small, tappable field showing the current value, expanding to a calendar or wheel popover only when the user activates it. It exists for space-constrained layouts — forms, settings rows, and inline controls — where a fully expanded graphical calendar would be too heavy. Reach for it when you want a date control that reads like an ordinary field at rest and reveals its full editing surface on demand. You apply it through the datePickerStyle(_:) modifier rather than constructing it directly.
Apply the style with datePickerStyle(.compact)
CompactDatePickerStyle conforms to DatePickerStyle, so you opt into it by passing the .compact shorthand to the datePickerStyle(_:) modifier on a DatePicker. In the example,
.datePickerStyle(.compact)is chained onto theDatePickerand collapses it into a compact field instead of the default presentation.Drive it from a Date binding
The style only governs presentation; the value still flows through the DatePicker's selection binding. Here
selection: $dateties the compact field to the@State private var date = Date()source of truth, so tapping the field and choosing a new date writes straight back into that state.Label the compact field
The compact control pairs a title with its inline value display, and that title comes from the DatePicker's label argument. The
"Event Date"string passed toDatePickeris shown beside the tappable value, giving the field meaning when it sits in a row of other controls.Place it where space is tight
Because CompactDatePickerStyle keeps the resting footprint to a single field, it slots cleanly into dense layouts. The
.padding()around the styledDatePickeris just breathing room — the compact style itself is what keeps the control from expanding into a full calendar until it's tapped.
.datePickerStyle(.compact) for .datePickerStyle(.graphical) and watch the same DatePicker expand from a tappable field into a full inline calendar.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 CompactDatePickerStyleDemo: View {
@State private var date = Date()
var body: some View {
DatePicker("Event Date", selection: $date)
.datePickerStyle(.compact)
.padding()
}
}