Advanced DatePicker in SwiftUI

How can we allow the user to select a date within a defined range? If you’re seeking an answer, read this post.

In this post, you’ll learn how to define different ranges:

• From a start date to the end of time.
• From the distant past to a defined endpoint.
• Within a well-defined range.

Let’s get started.

From a start date to the end of time

struct ContentView: View {
        var startDate = Date()
        @State private var dateSelected = Date()
        var body: some View {
            VStack {
                DatePicker(
                    "Select a date",
                    selection: $dateSelected,
                    in: startDate...,
                    displayedComponents: [.date])
                .padding()
            }
        }
    }

Therefore, we set the startDate to today, just to simplify things. In the DatePicker, we define the range with:

in: startDate...,

So, from today to end of the time.

From the distant past to a defined endpoint

This is the dual of the previous case; here, we invert the range:

in: ...endDate,

where endDate is

var endDate = Date()

To have

Within a well-defined range

As you can imagine, we need to define a range:

let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2024, month: 2, day: 2)
        let endComponents = DateComponents(year: 2024, month: 2, day: 27)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()

ClosedRange is a structure that allows us to define an interval between an upper and a lower bound.

DateComponents allow us to specify a date using year, month, day, hour, and minutes.

In this example, we use only year, month, and day. Feel free to modify the example by also including hour and minutes in the range.

struct ContentView: View {
    let dateRange: ClosedRange<Date> = {
        let calendar = Calendar.current
        let startComponents = DateComponents(year: 2024, month: 2, day: 2)
        let endComponents = DateComponents(year: 2024, month: 2, day: 27)
        return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
    }()
    @State private var dateSelected = Date()
    
    var body: some View {
        VStack {
            DatePicker(
            "Pick a date",
            selection: $dateSelected,
            in: dateRange,
            displayedComponents: [.date])
            .padding()
        }
    }
}

In this case we have:

Thanks for reading.

Note: English is not my native language, so I apologize for any errors. I use AI solely to generate the banner of the post; the content is human-generated.