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.
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> );}