New in SwiftUI 4: MultiDatePicker
SwiftUI 4 came with another cool new addition, MultiDatePicker. This new control allows us to pick multiple dates.
Let’s get started with an example. Creating MultiDatePicker is easy, all we need is a State variable to store selected dates and MultiDatePicker view itself.
State variable os passed as selection binding value into the MutiDatePicker as shown below:
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates)
.frame(height: 300)
}
.padding()
}
}
Display Selected Dates
We can display selected dates in a Text view as well. Let’s update our code to display selected dates.
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
@State private var formattedDates: String = ""
let formatter = DateFormatter()
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates)
.frame(height: 300)
.onChange(of: selectedDates, perform: { _ in
formatSelectedDates()
})
ScrollView {
LazyVStack(alignment: .leading) {
Text(formattedDates)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
private func formatSelectedDates() {
formatter.dateFormat = "MMM-dd-YY"
let dates = selectedDates
.compactMap { date in
Calendar.current.date(from: date)
}
.map { date in
formatter.string(from: date)
}
formattedDates = dates.joined(separator: "\n")
}
}
Date Selection within Range
We can also limit the MultiDatePicker to specific ranges of dates allowing selections only before or after a certain date or between two dates.
Date selection before today
MultiDatePicker takes date range parameter, so if we want to limit date selection for dates before today, we can do something like this:
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
@State private var formattedDates: String = ""
let formatter = DateFormatter()
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates, in: ..<Date())
.frame(height: 300)
.onChange(of: selectedDates, perform: { _ in
formatSelectedDates()
})
ScrollView {
LazyVStack(alignment: .leading) {
Text(formattedDates)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
private func formatSelectedDates() {
formatter.dateFormat = "MMM-dd-YY"
let dates = selectedDates
.compactMap { date in
Calendar.current.date(from: date)
}
.map { date in
formatter.string(from: date)
}
formattedDates = dates.joined(separator: "\n")
}
}
Date selection after today
In order to make dates selectable after today, we can create range like following:
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
@State private var formattedDates: String = ""
let formatter = DateFormatter()
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates, in: Date()...)
.frame(height: 300)
.onChange(of: selectedDates, perform: { _ in
formatSelectedDates()
})
ScrollView {
LazyVStack(alignment: .leading) {
Text(formattedDates)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
private func formatSelectedDates() {
formatter.dateFormat = "MMM-dd-YY"
let dates = selectedDates
.compactMap { date in
Calendar.current.date(from: date)
}
.map { date in
formatter.string(from: date)
}
formattedDates = dates.joined(separator: "\n")
}
}
Date selection between two dates
To enable date selected between two dates, we will create from and to date range and pass it into the MultiDatePickerview, as shown below:
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
@State private var formattedDates: String = ""
let formatter = DateFormatter()
let fromDate = Calendar.current.date(from: DateComponents(year: 2022, month: 06, day: 15))!
let toDate = Calendar.current.date(from: DateComponents(year: 2022, month: 06, day: 18))!
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates, in: fromDate..<toDate)
.frame(height: 300)
.onChange(of: selectedDates, perform: { _ in
formatSelectedDates()
})
ScrollView {
LazyVStack(alignment: .leading) {
Text(formattedDates)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
private func formatSelectedDates() {
formatter.dateFormat = "MMM-dd-YY"
let dates = selectedDates
.compactMap { date in
Calendar.current.date(from: date)
}
.map { date in
formatter.string(from: date)
}
formattedDates = dates.joined(separator: "\n")
}
}
Formatting MultiDatePicker
SwiftUI’s formatting modifiers works same as on any other view for MultiDatePicker. Let’s apply tint, padding and backgroundColor to our date picker.
struct ContentView: View {
@State private var selectedDates: Set<DateComponents> = []
@State private var formattedDates: String = ""
let formatter = DateFormatter()
let fromDate = Calendar.current.date(from: DateComponents(year: 2022, month: 06, day: 15))!
let toDate = Calendar.current.date(from: DateComponents(year: 2022, month: 06, day: 18))!
var body: some View {
VStack {
Text("DevTechie!")
.font(.largeTitle)
.foregroundColor(.primary)
MultiDatePicker("Travel Dates", selection: $selectedDates, in: fromDate..<toDate)
.frame(height: 300)
.onChange(of: selectedDates, perform: { _ in
formatSelectedDates()
})
.tint(.orange)
.padding()
.background(Color.blue.opacity(0.2).gradient, in: RoundedRectangle(cornerRadius: 10))
ScrollView {
LazyVStack(alignment: .leading) {
Text(formattedDates)
}
}
.frame(maxWidth: .infinity)
}
.padding()
}
private func formatSelectedDates() {
formatter.dateFormat = "MMM-dd-YY"
let dates = selectedDates
.compactMap { date in
Calendar.current.date(from: date)
}
.map { date in
formatter.string(from: date)
}
formattedDates = dates.joined(separator: "\n")
}
}
With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com