How do I limit the selection values of a SwiftUI DatePicker?

user_17588747 0
Viewed 228

Does someone know how to add a function like - if the selected age < 18 - the User is unable to hit the continue button and won't be navigated to the next page ? Would help me a lot.

My Code:

import SwiftUI

struct DateOfBirthView: View {
    
@ State private var birthdate = Date()
    
    var body: some View {
        VStack {
            DatePicker("date of birth", selection: $birthdate,
                       displayedComponents: [.date])
                .font(.title3)
                .padding()
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray.opacity(0.1)))
                .padding(.top, 15)
            
            Text("you must be at least 18 to Register")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading)
            
            CustomNavLink(destination: SelectGenderView()
                .customNavigationTitle("Registration"),
                label: {
            DefaultButton (title: "continue")
                .padding(.top, 15)
            })
            
            Spacer()
            
        }
        .padding (.horizontal, 25)
    }
}
swiftui datepicker xcode
1 Answers

You can compare the chosen date with a date representing the first valid date.

I don't know the composition of CustomNavLink or DefaultButton, which you haven't included, so I'm showing using Button with disabled to demonstrate the concept:

struct DateOfBirthView: View {
    
    @State private var birthdate = Date()
    
    var dateIsValid : Bool {
        let currentDate = Date()
        var dateComponent = DateComponents()
        dateComponent.year = -18
        guard let validDate = Calendar.current.date(byAdding: dateComponent, to: currentDate) else {
            return false
        }
        return birthdate <= validDate
    }
    
    var body: some View {
        VStack {
            DatePicker("date of birth", selection: $birthdate,
                       displayedComponents: [.date])
                .font(.title3)
                .padding()
                .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray.opacity(0.1)))
                .padding(.top, 15)
            
            Text("you must be at least 18 to Register")
                .frame(maxWidth: .infinity, alignment: .leading)
                .padding(.leading)
            
            Button("Continue") {
                
            }.disabled(!dateIsValid)
            
            Spacer()
            
        }
        .padding (.horizontal, 25)
    }
}

You can also explicitly limit the selection ranges of the date picker. Apple's documentation provides the following example:

@State private var date = Date()
let dateRange: ClosedRange<Date> = {
    let calendar = Calendar.current
    let startComponents = DateComponents(year: 2021, month: 1, day: 1)
    let endComponents = DateComponents(year: 2021, month: 12, day: 31, hour: 23, minute: 59, second: 59)
    return calendar.date(from:startComponents)!
        ...
        calendar.date(from:endComponents)!
}()

var body: some View {
    DatePicker(
        "Start Date",
         selection: $date,
         in: dateRange,
         displayedComponents: [.date, .hourAndMinute]
    )
}
user_5609420
Related