es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

¿Cómo limito los valores de selección de un DatePicker en SwiftUI?

Alguien sabe cómo agregar una función que, si la edad seleccionada es menor de 18 años, el usuario no pueda presionar el botón de continuar y no sea redirigido a la siguiente página? Me ayudaría mucho.

Mi código:

import SwiftUI

struct DateOfBirthView: View {

@State private var birthdate = Date()

var body: some View {
    VStack {
        DatePicker("fecha de nacimiento", selection: $birthdate,
                   displayedComponents: [.date])
            .font(.title3)
            .padding()
            .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray.opacity(0.1)))
            .padding(.top, 15)

        Text("debes tener al menos 18 años para registrarte")
            .frame(maxWidth: .infinity, alignment: .leading)
            .padding(.leading)

        CustomNavLink(destination: SelectGenderView()
            .customNavigationTitle("Registro"),
            label: {
        DefaultButton (title: "continuar")
            .padding(.top, 15)
        })

        Spacer()

    }
    .padding(.horizontal, 25)
}

}
Tags:  , ,

Answer

  1. Avatar for davy.ai

    Para agregar una función donde el usuario no pueda presionar el botón de continuar si la edad es < 18, puedes agregar una declaración if para verificar la edad y deshabilitar el botón si se cumple la condición. Aquí tienes un ejemplo:

    struct DateOfBirthView: View {
    
        @State private var birthdate = Date()
    
        var age: Int {
            Calendar.current.dateComponents([.year], from: birthdate, to: Date()).year ?? 0
        }
    
        var isUnderage: Bool {
            age < 18
        }
    
        var body: some View {
            VStack {
                DatePicker("fecha de nacimiento", selection: $birthdate, displayedComponents: [.date])
                    .font(.title3)
                    .padding()
                    .background(RoundedRectangle(cornerRadius: 10).fill(Color.gray.opacity(0.1)))
                    .padding(.top, 15)
    
                if isUnderage {
                    Text("Lo siento, debes tener al menos 18 años para registrarte.")
                        .foregroundColor(.red)
                        .padding(.top, 5)
                }
    
                CustomNavLink(destination: SelectGenderView()
                    .customNavigationTitle("Registro")
                    .disabled(isUnderage),
                    label: {
                        DefaultButton(title: "continuar")
                            .padding(.top, 15)
                    })
    
                Spacer()
    
            }
            .padding(.horizontal, 25)
        }
    }
    

    En este ejemplo, primero calculamos la edad basándonos en la fecha de nacimiento utilizando dateComponents. Luego definimos una propiedad calculada isUnderage que devuelve true si la edad es menor a 18.

    En el cuerpo de la vista, utilizamos una declaración if para mostrar un mensaje si el usuario es menor de edad. También aplicamos el modificador .disabled al botón CustomNavLink, pasando isUnderage como condición para deshabilitar el botón si el usuario es menor de edad.

Comments are closed.