Datetimepicker: Android: DateTimePicker keeps resetting to default value

[philippe-ftx]

My DateTimePicker keeps resetting to the default value while open.

Code:

const CustomDateTimePicker = React.memo((onChange) => {

    console.log('Rerender CustomDateTimePicker');

    const [date, setDate] = useState(new Date('1985/01/01'));
    const [show, setShow] = useState(Platform.OS === 'ios');

    const onDateChange = useCallback((event, date) => {
        setShow(Platform.OS === 'ios');
        setDate(date);
        onChange(date);
    }, []);

    useEffect(() => {
        console.log('Date changed');
    }, [date]);

    return (
        <View style={{ flexDirection: 'row' }}>
            {Platform.OS === 'android' &&
                <TouchableOpacity
                    onPress={() => setShow(true)}
                    style={{
                        flex: 1,
                        marginVertical: 10,
                        padding: 10,
                    }}
                >
                    <Text style={{ fontSize: 16 }}>{date && date.toLocaleDateString()}</Text>
                </TouchableOpacity>
            }
            {show &&
                <DateTimePicker
                    testID="dateTimePicker"
                    textColor={'#ffffff'}
                    value={date}
                    mode={'date'}
                    display='default'
                    onChange={onDateChange}
                />
            }
        </View>
    )
});

export default CustomDateTimePicker;

When the dialog is open and I select a date, the component will undo my change and go back to the default value after a second or two.

I don't the console prints while this is happening.

[podplatnikm]

Any update on this ?

[vonovak]

hello, does this happen on ios or android?

[nicolasmsg]

hello, I don't know for ios but it happens on android

[obiwankenoobi]

can confirm this still happening for Android

[PaulOskarSoe]

I had a similar issue. I think the problem comes from the re-rendering of the calendar component. Try wrapping your parent component inside useMemo hook and render the component only if show calendar state changes. It worked for me :)

        {/* ONLY RENDER CALENDAR WHEN SHOW CALENDAR CHANGES */}
        {React.useMemo(() => {
          return (
            <CalendarDatesPicker
              pickDate={pickDate}
              selectedDate={selectedDate}
              language={language}
              closeCalendar={() => setCalendar(false)}
              showCalendar={showCalendar}
            />
          );
        }, [showCalendar])}

[the-codepunker]

Same issue here.

[PaulOskarSoe]

Did you try wrapping parent component into useMemo?

[the-codepunker]

Did you try wrapping parent component into useMemo?

I did and it worked by wrapping it in useMemo... however, I suppose this is just a temporary fix...

[PaulOskarSoe]

Did you try wrapping parent component into useMemo?

I did and it worked by wrapping it in useMemo... however, I suppose this is just a temporary fix...

In my case, I had a polling function that triggered re-render every 5-8 seconds, which caused the resetting of the value. With useMemo I was able to tell react don't re-render calendar component and give new props. You can also check your re-rendering, I think that might cause the issue with the resetting to the default value.

[evgenyshenets91]

as I understood, we save our data after press ok for android, and if we select some date, after ±5 sek value moves to default.
I wrap my component into useMemo

[lokomass]

Why can we fix it if we don't use Hooks ?

[PaulOskarSoe]

@lokomass Yes, you just have to prevent re-rendering. I think shouldComponentUpdate will do the work. https://reactjs.org/docs/react-component.html

[lokomass]

Finally, this save my life :) https://github.com/react-native-community/datetimepicker/issues/68#issuecomment-639776038

[lokomass]

This work : https://github.com/react-native-community/datetimepicker/issues/68#issuecomment-639776038
But when I use minimumDate and maximumDate, the default value is always resetting... I can't change picker value

[vonovak]

:tada: This issue has been resolved in version 3.0.9 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[kapilwhaval]

I tried this workaround. Works fine.

const DTPicker = ({ mode, onChange, value, placeholder, label,}) => {

    const [show, setShow] = useState(false);

    const handleDate = (e) => {
        if (e.nativeEvent.timestamp) onChange(e.nativeEvent.timestamp)
        setShow(Platform.OS === 'ios')
    }

    return <View>
        <TextInput placeHolder={placeholder} label={label} onFocus={() => setShow(true)} value={value} />
        {React.useMemo(() => {
            return show && <DateTimePicker
                value={new Date()}
                mode={mode}
                display="default"
                onChange={handleDate}
            />
        }, [show])}
    </View>
};