CODEWITHSUNDEEP
javascriptreact-nativedatereact-hooks
Nomel
Nomel

Reputation: 123

React Native DateTimePicker: Why is it keep opening after I press the "OK" buton

I'm trying to create a date picker. When the user press on the "OK" button the modal should have closed but it keeps reopening. I'm using react-native-datetimepicker. I did tried putting setShow(false) when the "OK" button is pressed but it still open for a split second.

const [receiptDate, setReceiptDate] = React.useState("");
const [date, setDate] = React.useState(new Date()); 
const [today, setToday] = React.useState(new Date()); 
const [show, setShow] = React.useState(false); 

const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setDate(currentDate);
    if (event.type == "dismissed") {  
        console.log("CANCEL")
        setShow(false) 
        return null;
    } else { 
        setShow(false)
        console.log("OK")
        let tempDate = new Date(currentDate);
        let fDate = tempDate.getFullYear() + "-" + tempDate.getDate() + "-" + (tempDate.getMonth() + 1)
        setReceiptDate(fDate);
        console.log(fDate);
        return;
    }
}

                     <View>
                        <TouchableOpacity activeOpacity={0.9} onPress={() => setShow(true)}>
                            <TextInput
                                editable={false} 
                                placeholder="YYYY-MM-DD (2022-05-22)" 
                                value={receiptDate}
                            />
                        </TouchableOpacity>
                        {show && (
                            <DateTimePicker
                                testID='dateTimePicker'
                                value={date}
                                mode={'date'} 
                                display='default'
                                onChange={onChange}
                                maximumDate={today}
                        />)}
                    </View>

Upvotes: 1

Views: 2434

Answers (2)

Jolly Good
Jolly Good

Reputation: 550

The above solution didn't work for me (Android Version), what worked for me was:

Try setting the show to false on the onChange but make sure to call this BEFORE you set the values. I fixed this for Date mode by following this answer from: https://github.com/react-native-datetimepicker/datetimepicker/issues/54

enter image description here

Upvotes: 1

STBox
STBox

Reputation: 645

In my opinion, you are not setting show to false, in case if the user selects an option. Please try this and let me know if it fixes your problem or not:

const onChange = (event, selectedDate) => {
        if (event.type == 'set') {
            const currentDate = selectedDate || startDate;
            let tempDate = new Date(currentDate);
            let fDate = tempDate.getFullYear() + "-" + tempDate.getDate() + "-" + (tempDate.getMonth() + 1)
            setReceiptDate(fDate);
            setDate(currentDate);
        }
        setShow(false) 
    }

Upvotes: 1

Related Questions