MultiDatePicker
A control for picking multiple dates.
Declaration
struct MultiDatePicker<Label> where Label : ViewOverview
Use a MultiDatePicker when you want to provide a view that allows the user to select multiple dates.
The following example creates a basic MultiDatePicker, which appears as a calendar view representing the selected dates:
@State private var dates: Set<DateComponents> = []
var body: some View {
MultiDatePicker("Dates Available", selection: $dates)
}You can limit the MultiDatePicker to specific ranges of dates allowing selections only before or after a certain date or between two dates. The following example shows a multi-date picker that only permits selections within the 6th and (excluding) the 16th of December 2021 (in the UTC time zone):
@Environment(\.calendar) var calendar
@Environment(\.timeZone) var timeZone
var bounds: Range<Date> {
let start = calendar.date(from: DateComponents(
timeZone: timeZone, year: 2022, month: 6, day: 6))!
let end = calendar.date(from: DateComponents(
timeZone: timeZone, year: 2022, month: 6, day: 16))!
return start ..< end
}
@State private var dates: Set<DateComponents> = []
var body: some View {
MultiDatePicker("Dates Available", selection: $dates, in: bounds)
}You can also specify an alternative locale, calendar and time zone through environment values. This can be useful when using a PreviewProvider to see how your multi-date picker behaves in environments that differ from your own.
The following example shows a multi-date picker with a custom locale, calendar and time zone:
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
MultiDatePicker("Dates Available", selection: .constant([]))
.environment(\.locale, Locale.init(identifier: "zh"))
.environment(
\.calendar, Calendar.init(identifier: .chinese))
.environment(\.timeZone, TimeZone(abbreviation: "HKT")!)
}
}