How it works
MultiDatePicker presents a calendar interface that lets people choose any number of dates at once, rather than the single instant a standard DatePicker provides. Reach for it when a feature needs a set of days — marking availability, scheduling recurring events, or planning across a trip — where each day is an independent selection. The control binds to a Set of DateComponents, so the selection naturally models "which days" without carrying time-of-day precision. It renders as an inline graphical month grid and manages the highlighting, paging, and toggling of dates for you.
Bind to a Set of DateComponents
MultiDatePicker's selection parameter takes a binding to a Set<DateComponents>, where each element identifies one chosen day. Because it's a set, dates are unordered and automatically de-duplicated, and tapping a highlighted day removes it. Here the binding is
$dates, backed by@State private var dates: Set<DateComponents> = [], which starts empty so no days are selected.Label the control with a title initializer
The
MultiDatePicker(_:selection:)initializer accepts a title string that describes the picker's purpose for accessibility and context. In the example the title is"Select dates", paired with theselection: $datesbinding. The visible calendar is always the graphical month grid; the title primarily serves accessibility and any surrounding layout that surfaces it.Read the selection as live state
Because the bound set is observable state, any view can react to it as the user toggles days. The example reads
dates.countin aTextto report "\(dates.count) day(s) selected", and the count updates immediately on each tap — demonstrating that the picker writes selections straight back through the binding.Size the calendar with frame(height:)
MultiDatePicker draws an inline month grid that wants a fixed amount of vertical space, so it's commonly constrained with a frame modifier. The example applies
.frame(height: 320)to give the calendar a stable height within its surroundingVStack.
dates: Set<DateComponents> = [] to seed it with a couple of DateComponents values and watch those days appear pre-highlighted on the calendar while the dates.count text reports them as already selected.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 MultiDatePickerDemo: View {
@State private var dates: Set<DateComponents> = []
var body: some View {
VStack(spacing: 12) {
MultiDatePicker("Select dates", selection: $dates)
.frame(height: 320)
Text("\(dates.count) day(s) selected")
.font(.caption)
.foregroundStyle(.secondary)
}
.padding()
}
}