Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

165
Views
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 answers
Answer question

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 Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!