Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

158
Vistas
Establecer error en la entrada de texto si la fecha está por debajo de una fecha específica reaccionar de forma nativa

Estoy tratando de hacer una entrada de texto de edad para mi aplicación que, si tiene menos de 18 años, establece un estado de error y cambia de color. Aquí está mi código:

 function AgeButton() { const [age, setAge] = useState(''); const [date, setDate] = useState(new Date(1598051730000)); const [modalVisible, setModalVisible] = useState(false); const [error, setError] = useState(false); const {header, modal, bottomModalView} = styles; const today = new Date() const minimumAgeYear = today.getFullYear() - 18 const onChange = (event: any, selectedDate: Date) => { const currentDate = selectedDate || date; // if (currentDate.getFullYear() > minimumAgeYear) { // return setError(true); // } setDate(currentDate); setAge(AgeCalculator(date)); }; return ( <View> <Modal style={bottomModalView} isVisible={modalVisible} backdropOpacity={0} onBackdropPress={() => setModalVisible(false)}> <View style={modal}> <DateTimePicker style={{alignItems: 'center', justifyContent: 'center', height: '70%'}} testID="dateTimePicker" value={date} mode={'date'} display="spinner" // @ts-ignore onChange={onChange} // maximumDate={new Date(minimumAgeYear, today.getMonth(), today.getDay())} textColor='#878787' /> <Text style={header}>How old are you?</Text> </View> </Modal> <TextInput onTouchStart={() => setModalVisible(true)} editable={false} autoComplete mode="outlined" label="Age" value={age} onChangeText={age => setAge(age)} style={{maxHeight: 64, minWidth: '47%', marginRight: 16}} activeOutlineColor={"#000"} outlineColor={error ? '#ff3333' : (modalVisible ? "#000" : "#DBDBDB")} theme={{ colors: { text: "#000", placeholder: error ? "#ff3333" : "#878787", background: "#FFF" } }} /> </View> );

}

Llegué al punto en el que podría obtener un error de edad si es inferior a 18, sin embargo, no puedo hacer que cambie si la entrada cambia. Cualquier ayuda sobre cómo hacer esto sería genial, ya que originalmente traté de establecer una fecha máxima en DateTimePicker, sin embargo, esto afecta a UX como si un usuario eligiera su fecha de nacimiento al revés, la rueda giratoria no lo dejaría.

about 4 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Solo necesitaba establecer un operador de turno para la edad:

 function AgeButton() { const [age, setAge] = useState(''); const [date, setDate] = useState(new Date(1598051730000)); const [modalVisible, setModalVisible] = useState(false); const [error, setError] = useState(false); const {header, modal, bottomModalView} = styles; const today = new Date() const onChange = (event: any, selectedDate: Date) => { const currentDate = selectedDate || date; age < '18' ? setError(true) : setError(false); setDate(currentDate); setAge(AgeCalculator(date)); }; return ( <View> <Modal style={bottomModalView} isVisible={modalVisible} backdropOpacity={0} onBackdropPress={() => setModalVisible(false)}> <View style={modal}> <DateTimePicker style={{alignItems: 'center', justifyContent: 'center', height: '70%'}} testID="dateTimePicker" value={date} mode={'date'} display="spinner" // @ts-ignore onChange={onChange} // maximumDate={new Date(minimumAgeYear, today.getMonth(), today.getDay())} textColor='#878787' /> <Text style={header}>How old are you?</Text> </View> </Modal> <TextInput onTouchStart={() => setModalVisible(true)} editable={false} autoComplete mode="outlined" label="Age" value={age} onChangeText={age => setAge(age)} style={{maxHeight: 64, minWidth: '47%', marginRight: 16}} activeOutlineColor={"#000"} outlineColor={error ? '#ff3333' : (modalVisible ? "#000" : "#DBDBDB")} theme={{ colors: { text: error ? "#ff3333" : "#000", placeholder: error ? "#ff3333" : "#878787", background: "#FFF" } }} /> </View> );

}

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda