Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

162
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda