WWDC22 SALE: Save 50% on all my Swift books and bundles! >>

How to let the user select multiple dates

Paul Hudson    @twostraws   

Updated for Xcode 14.0 beta 1

New in iOS 16

SwiftUI’s MultiDatePicker shows a calendar view where the user is able to select a variety of dates at the same time, either from any possible date or from a date range of your choosing.

In its simplest form, you just need some sort of state to track which dates they have chosen, then bind that to your picker:

struct ContentView: View {
    @State var dates: Set<DateComponents> = []

    var body: some View {
        MultiDatePicker("Select your preferred dates", selection: $dates)
    }
}

Download this as an Xcode project

However, chances are you’re going to want to convert those date components to real dates, in which case you’ll want to read the user’s calendar from the environment and convert the data as needed:

struct ContentView: View {
    @Environment(\.calendar) var calendar
    @State var dates: Set<DateComponents> = []

    var body: some View {
        VStack {
            MultiDatePicker("Select your preferred dates", selection: $dates)

            Text(summary)
        }
        .padding()
    }

    var summary: String {
        dates.compactMap { components in
            calendar.date(from: components)?.formatted(date: .long, time: .omitted)
        }.formatted()
    }
}

Download this as an Xcode project

By default, the user is able to choose any dates they like, but you can also restrict their selection to a range of your choosing. For example, this code allows them to select any date from today onwards, but nothing earlier:

struct ContentView: View {
    @Environment(\.calendar) var calendar
    @State var dates: Set<DateComponents> = []

    var body: some View {
        VStack {
            MultiDatePicker("Select your preferred dates", selection: $dates, in: Date.now...)

            Text(summary)
        }
        .padding()
    }

    var summary: String {
        dates.compactMap { components in
            calendar.date(from: components)?.formatted(date: .long, time: .omitted)
        }.formatted()
    }
}

Download this as an Xcode project

Hacking with Swift is sponsored by RevenueCat

SPONSORED You know StoreKit, but you don’t want to do StoreKit. RevenueCat makes it easy to deploy, manage, and analyze in-app subscriptions on iOS and Android so you can focus on building your app.

Explore the docs

Sponsor Hacking with Swift and reach the world's largest Swift community!

Similar solutions…

BUY OUR BOOKS
Buy Pro Swift Buy Swift Design Patterns Buy Testing Swift Buy Hacking with iOS Buy Swift Coding Challenges Buy Swift on Sundays Volume One Buy Server-Side Swift (Vapor Edition) Buy Advanced iOS Volume One Buy Advanced iOS Volume Two Buy Advanced iOS Volume Three Buy Hacking with watchOS Buy Hacking with tvOS Buy Hacking with macOS Buy Dive Into SpriteKit Buy Swift in Sixty Seconds Buy Objective-C for Swift Developers Buy Server-Side Swift (Kitura Edition) Buy Beyond Code

Was this page useful? Let us know!

 
Unknown user

You are not logged in

Log in or create account
 

Link copied to your pasteboard.