Dialog opens twice on Android

Question

Dialog opens twice on Android

Niore opened this issue 5 years ago · comments

If i open the Datepicker it opens twice on Android. I select in the first Dialog a date. then the same dialog opens again and i have to select a date again . After the second time it will accept the input. Can someone help me?

Thats the code of the component. Most of the components are just for styling:

const DatePickerInput = ({
  inputName,
  locale,
  labelKey,
  max,
  min,
}) => {
  const { values, setFieldValue } = useFormikContext();
  const [t] = useTranslation('validatedTextInput');
  const [showDatePicker, setShowDatePicker] = useState(false);
  const initialDate = values[inputName] || new Date();
  const [selectedDate, setSelectedDate] = useState(moment(initialDate).toDate());
  const datePlaceholderKey = 'datePlaceholder';
  return (
    <DatePickerContainer>
      <DatePickerLabel>
        {t(labelKey)}
      </DatePickerLabel>
      <DatePickerButtonContainer>
        <DatePickerButton
          onPress={() => setShowDatePicker(!showDatePicker)}
        >
          <DatePickerButtonText>
            {selectedDate
              ? moment(selectedDate).format('L')
              : t(datePlaceholderKey)}
          </DatePickerButtonText>
          <DatePickerButtonImage source={Calendar} />
        </DatePickerButton>
      </DatePickerButtonContainer>
      {
        showDatePicker && (
          <DateTimePicker
            mode="date"
            display="spinner"
            value={selectedDate}
            onChange={(event, value) => {
              setFieldValue(inputName, value);
              setShowDatePicker(!showDatePicker);
              // setSelectedDate(value);
            }}
            maximumDate={max}
            minimumDate={min}
            locale={locale}
          />
        )
      }
    </DatePickerContainer>
  );
};

Thx for your help

Tran Hoang Duong · Answer 1 · Mon Nov 11 2019 15:08:20 GMT+0800 (China Standard Time)

Did you resolve this problem @Niore?
I'm having a similar issue :/

Julian Ziörjen · Answer 2 · Mon Nov 11 2019 15:32:11 GMT+0800 (China Standard Time)

no still got no solution for it.

Chris Cass · Answer 3 · Tue Nov 12 2019 03:09:48 GMT+0800 (China Standard Time)

Have you tried setShowDatePicker(Platform.OS === 'ios' ? true : false);?
I remember having the same issue and I think the above was part of the solution.

Cyril Grossenbacher · Answer 4 · Tue Nov 12 2019 23:46:49 GMT+0800 (China Standard Time)

The problem is because of the rerender queue when using useState hooks explained here
https://stackoverflow.com/a/54120412

To implicitly order the rerenders and avoid a second datepicker just do

onChange={(event, value) => {
 setShowDatePicker(Platform.OS === 'ios'); // first state update hides datetimepicker
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}

To be more explicit I suggest the useStateWithCallback hook created by @rwieruch here
https://github.com/the-road-to-learn-react/use-state-with-callback/blob/master/src/index.js

And replace your current selectedDate state hook with the following:

const [selectedDate, setSelectedDate] = useStateWithCallback(
    initialDate,
    () => setShowDatePicker(Platform.OS === 'ios'),
);

With this you no longer need to set the showDatePicker state onChange() so just this:

onChange={(event, value) => {
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}

vovka-s · Answer 5 · Thu Nov 14 2019 18:31:15 GMT+0800 (China Standard Time)

I fixed this problem by closing the picker before handling it's value.
Swap setFieldValue and setShowDatePicker into onChange handler

onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}

Hope this will work

Vance Pope · Answer 6 · Tue Dec 17 2019 06:28:25 GMT+0800 (China Standard Time)

@vovka-s I've been scratching my head all day on this one, thank you!

Mateusz Janik · Answer 7 · Fri Dec 20 2019 22:24:59 GMT+0800 (China Standard Time)

Another solution is just creating a memoized wrapper for avoid render phase of native component:
const MemoizedDateTimePicker = React.memo((props) => <DateTimePicker {...props} />)

André Rodrigues · Answer 8 · Tue Feb 11 2020 09:36:21 GMT+0800 (China Standard Time)

I fixed it with the following code:

const [state, setState] = useState({
  date: new Date(),
  mode: 'date',
  show: false
});
const onChange = (event, selectedDate) => {
  const currentDate = selectedDate || state.date;

  setState({...state, date: currentDate, show: false});
};
const showPicker = currentMode => {
  setState({...state, show: true});
};

{ state.show && 
  (<DateTimePicker
        testID="dateTimePicker"
        timeZoneOffsetInMinutes={0}
        value={state.date}
        mode={state.mode}
        is24Hour={true}
        display="default"
        onChange={onChange}
      />)
}

Guilherme Nisiyama de Jesus · Answer 9 · Wed Feb 19 2020 09:06:56 GMT+0800 (China Standard Time)

The problem is because of the rerender queue when using useState hooks explained here
https://stackoverflow.com/a/54120412

To implicitly order the rerenders and avoid a second datepicker just do
onChange={(event, value) => {
 setShowDatePicker(Platform.OS === 'ios'); // first state update hides datetimepicker
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}
To be more explicit I suggest the useStateWithCallback hook created by @rwieruch here
https://github.com/the-road-to-learn-react/use-state-with-callback/blob/master/src/index.js

And replace your current selectedDate state hook with the following:
const [selectedDate, setSelectedDate] = useStateWithCallback(
    initialDate,
    () => setShowDatePicker(Platform.OS === 'ios'),
); 
With this you no longer need to set the showDatePicker state onChange() so just this:
onChange={(event, value) => {
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}

Works like a charm.
Thanks!

James Greenwood · Answer 10 · Wed Apr 15 2020 20:23:18 GMT+0800 (China Standard Time)

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

vovka-s · Answer 11 · Fri Apr 24 2020 11:07:19 GMT+0800 (China Standard Time)

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm
It works for me

sackda75 · Answer 12 · Fri Apr 24 2020 17:19:13 GMT+0800 (China Standard Time)

const handleConfirm = (datetime) => {
hideDatePicker() //must be first
console.log("A date has been picked: ", datetime)
setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

Thank you very much ! It works !

Vishwa Deep Ghimire · Answer 13 · Tue Jun 09 2020 21:49:12 GMT+0800 (China Standard Time)

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm
It works for me

@ vovka-s Thank you very much . It worked for me, you saved my day.

Sandesh Jonchhe · Answer 14 · Tue Jun 30 2020 19:21:26 GMT+0800 (China Standard Time)

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

This kind of solved it for me

Iryna Kreichmann · Answer 15 · Wed Sep 16 2020 20:31:08 GMT+0800 (China Standard Time)

For anyone who the above solution didn't work for, I was having an identical issue. Spent 3 days trying to figure it out and eventually realised it was caused by the debugger. Stopping debug fixed the issue for me.

wow, that helped me as well, I spent about 4 hours trying to figure out what's wrong with the picker!

MorenoMdz · Answer 16 · Tue Oct 06 2020 22:57:27 GMT+0800 (China Standard Time)

The problem is because of the rerender queue when using useState hooks explained here
https://stackoverflow.com/a/54120412

To implicitly order the rerenders and avoid a second datepicker just do
onChange={(event, value) => {
 setShowDatePicker(Platform.OS === 'ios'); // first state update hides datetimepicker
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}
To be more explicit I suggest the useStateWithCallback hook created by @rwieruch here
https://github.com/the-road-to-learn-react/use-state-with-callback/blob/master/src/index.js

And replace your current selectedDate state hook with the following:
const [selectedDate, setSelectedDate] = useStateWithCallback(
    initialDate,
    () => setShowDatePicker(Platform.OS === 'ios'),
); 
With this you no longer need to set the showDatePicker state onChange() so just this:
onChange={(event, value) => {
 setFieldValue(inputName, value);
 setSelectedDate(value);
}}

Thank you that solved for me.
I have it set this way if anybody needs a Modal component that supports both OS.
DatePickerModal

Rakefet Ifrach · Answer 17 · Sun Oct 18 2020 23:48:45 GMT+0800 (China Standard Time)

I tried all the above, and none helped me.
But using

onHide={() => setShowDatePicker(false)}

worked like a charm :)

Joaquín · Answer 18 · Fri Oct 30 2020 04:56:06 GMT+0800 (China Standard Time)

Hi!
for me work this example when you have two DateTimePicker in same page.

    const showTimepicker = (event: any) => {
        event.preventDefault()
        setShow(true);
    };
    <TextLinkButton onPress={(event) => showTimepicker(event)} label={label} />

I hope it works for you. A greeting!

rovas · Answer 19 · Tue Nov 03 2020 19:26:35 GMT+0800 (China Standard Time)

I tried all the above, and none helped me.
But using
onHide={() => setShowDatePicker(false)}
worked like a charm :)

react-native-datetimepicker has no onHide method

Chanaka Amarasinghe · Answer 20 · Wed Nov 11 2020 16:18:14 GMT+0800 (China Standard Time)

I fixed this problem by closing the picker before handling it's value.
Swap setFieldValue and setShowDatePicker into onChange handler
onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}
Hope this will work

working !! Tada !!

Parth N Koshta · Answer 21 · Fri Nov 27 2020 20:49:57 GMT+0800 (China Standard Time)

I fixed this problem by closing the picker before handling it's value.
Swap setFieldValue and setShowDatePicker into onChange handler
onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}
Hope this will work

Thanks @vovka-s

Hiep Nguyen · Answer 22 · Wed Jan 06 2021 17:02:40 GMT+0800 (China Standard Time)

I fixed this problem by closing the picker before handling it's value.
Swap setFieldValue and setShowDatePicker into onChange handler
onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}
Hope this will work

Thank you so much!!!
You saved my life.

daheeahn · Answer 23 · Thu Jan 21 2021 09:10:07 GMT+0800 (China Standard Time)

Another solution is just creating a memoized wrapper for avoid render phase of native component:
const MemoizedDateTimePicker = React.memo((props) => <DateTimePicker {...props} />)

Thanks! It works.

Kapil Whaval · Answer 24 · Fri Jan 22 2021 14:44:00 GMT+0800 (China Standard Time)

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

Mateusz Janik · Answer 25 · Fri Jan 22 2021 18:29:56 GMT+0800 (China Standard Time)

I tried this workaround. Works fine.

Very weird use case for useMemo... Better try to extract it to React.memo'ized component

Kapil Whaval · Answer 26 · Fri Jan 22 2021 19:18:46 GMT+0800 (China Standard Time)

I tried this workaround. Works fine.

Very weird use case for useMemo... Better try to extract it to React.memo'ized component

Yes. We can refactor the component as you are saying. I have just added it here in single function, so that everyone can understand

Yayi · Answer 27 · Sun Jan 31 2021 02:32:49 GMT+0800 (China Standard Time)

I fixed this problem
onConfirm={selecteddate => {
setDate(selecteddate);
setPickerVisible(false);
} }

to

onConfirm={(selectedDate) => {
setPickerVisible(false);
setDate(selecteddate);
} }

Danielle "Dani" Brear · Answer 28 · Wed Feb 03 2021 01:30:35 GMT+0800 (China Standard Time)

I had this issue with the dialog showing up again after I'd selected the date value. My solution that worked is:

const [show, setShow] = React.useState<boolean>(false);
const [birthday, setBirthday] = React.useState<string | undefined>(undefined);
const onChangeDate = useCallback((event, selectedDate) => {
    setBirthday(selectedDate);
    setShow(false);
  }, []);

// in the render
{show && (
  <View>
    <DateTimePicker
      testID="dateTimePicker"
      maximumDate={
        new Date(
          moment().subtract(13, "years").format("yyyy-MM-DD"),
        )
      }
      value={
        birthday
          ? new Date(birthday)
          : new Date(
              moment().subtract(13, "years").format("yyyy-MM-DD"),
            )
      }
      mode="date"
      display="default"
      onChange={(e, v) => {
        setShow(Platform.OS === "ios");
        onChangeDate(e, v);
      }}
    />
  </View>
  )}

hope this helps!

Larysson Alves · Answer 29 · Tue Feb 23 2021 10:04:08 GMT+0800 (China Standard Time)

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

This solution was the only one that works for me. Someone can explain to me how useMemo works on this case?

Vigneshacme · Answer 30 · Sun Jun 13 2021 15:11:05 GMT+0800 (China Standard Time)

I fixed this problem by closing the picker before handling it's value.
Swap setFieldValue and setShowDatePicker into onChange handler
onChange={(event, value) => {
    setShowDatePicker(!showDatePicker);
    setFieldValue(inputName, value);
   // setSelectedDate(value);
}}
Hope this will work

thank you! it worked

Renato Marino Henz · Answer 31 · Thu Sep 02 2021 10:41:48 GMT+0800 (China Standard Time)

The suggested solution of closing the picker before anything else does not work for me. Also, I can't change the selected date.

What I believe it's happening in my case, is that due to the fact that two pickers are open, whenever I try selecting the new date on the visible picker, the picker behind it forces the date to be the previous selected value.

Here's what happens on my code when:

Closing the picker before setting the value:
- Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;
- Android Physical Device: when I close the picker, the second picker also gets closed and it's not possible to change the date;
Setting the value before closing the picker:
- On the Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;
- Android Physical Device, when I close the picker, the second picker becomes visible and it's possible to select the date;

Also, what's the default behaivour of 'onChange'? Should it get triggered whenever you click on a new date? Or only after you click 'Ok' to confirm the selected date?
If the first option is the default behaviour, I believe that this method is only getting attached to the 'second' picker, which is not visible at first.

Here's the relevant part of the current code I'm working with:

  const [usedAt, setUsedAt] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);
  ...

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={(e: Event, date?: Date) => {
            setShowDatePicker(Platform.OS === 'ios');
            setUsedAt(date || usedAt);
          }}
        />
      )}
      ...
  )

Renato Marino Henz · Answer 32 · Thu Sep 02 2021 20:45:43 GMT+0800 (China Standard Time)

The suggested solution of closing the picker before anything else does not work for me. Also, I can't change the selected date.

What I believe it's happening in my case, is that due to the fact that two pickers are open, whenever I try selecting the new date on the visible picker, the picker behind it forces the date to be the previous selected value.

Here's what happens on my code when:

Closing the picker before setting the value:

Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;

Android Physical Device: when I close the picker, the second picker also gets closed and it's not possible to change the date;

Setting the value before closing the picker:

On the Android emulator, when I close the picker, the second picker just pops and disappear, date does not change;

Android Physical Device, when I close the picker, the second picker becomes visible and it's possible to select the date;

Also, what's the default behaivour of 'onChange'? Should it get triggered whenever you click on a new date? Or only after you click 'Ok' to confirm the selected date?
If the first option is the default behaviour, I believe that this method is only getting attached to the 'second' picker, which is not visible at first.

Here's the relevant part of the current code I'm working with:
  const [usedAt, setUsedAt] = useState(new Date());
  const [showDatePicker, setShowDatePicker] = useState(false);
  ...

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={(e: Event, date?: Date) => {
            setShowDatePicker(Platform.OS === 'ios');
            setUsedAt(date || usedAt);
          }}
        />
      )}
      ...
  )

I've managed to get it to work now. Basically, I had to create a function with the 'useCallback' hook to deal with the date selection event like so:

  const handleDateChange = useCallback(
    (event: Event, date: Date | undefined) => {
      if (Platform.OS === 'android') {
        setShowDatePicker(false);
      }
      if (date) setUsedAt(date);
    },
    [],
  );

  return (
      ...

      {showDatePicker && (
        <DateTimePicker
          testID="dateTimePicker"
          value={usedAt}
          mode="date"
          is24Hour
          display="default"
          onChange={handleDateChange}
        />
      )}
      ...
  )

carlossison75 · Answer 33 · Mon Dec 06 2021 19:32:40 GMT+0800 (China Standard Time)

I'm 2 years late and I don't know if this is fixed already since I didn't read everything, but whoever still having this issue, just close the modal first before setting the new date.

Vojtech Novak · Answer 34 · Fri Mar 11 2022 12:24:28 GMT+0800 (China Standard Time)

Hello 👋 ,
this issues should be resolved in #574

With that, I'm closing the issue,
Thank you! 🙂

Shail Patel · Answer 35 · Fri Aug 05 2022 10:16:59 GMT+0800 (China Standard Time)

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm It works for me

Thank you so much
this work like charm
i was struggling from many days

Khaled Charkie · Answer 36 · Thu Sep 08 2022 17:59:39 GMT+0800 (China Standard Time)

try that

const handleConfirm = (datetime) => {
   hideDatePicker() //must be first
   console.log("A date has been picked: ", datetime)  
   setChosenDate(moment(datetime).format('dddd Do MMMM YYYY à HH:mm'))
}

If not, try to use onChange callback instead of onConfirm It works for me

Still works!

Abdalla Suliman · Answer 37 · Thu Oct 13 2022 17:32:11 GMT+0800 (China Standard Time)

DatePickerModal

which debugger do you mean exactly?

iamemiliano · Answer 38 · Sun Oct 16 2022 01:30:30 GMT+0800 (China Standard Time)

I hope you are doing well. I have a problem with react native on Android. In IOS, it works well but when i open a componant who includes a DataTimePicker in Android, it automatically shows me the DatatimePicker. Do you know what the problem is in my code ?

             <View style={styles.dateContainer}>
                <Text style={styles.customLabelDate}>
                    Date de naissance
                </Text>
                <DateTimePicker
                    testID="dateTimePicker"
                    value={stateForm.dateOfBirth}
                    mode="date"
                    is24Hour={true}
                    display="calendar"
                    onChange={(event, value) => {
                        dispatchStateForm({
                            type: UPDATE,
                            payload: { name: "dateOfBirth", value: value },
                        });
                    }}
                    style={styles.dateTime}
                    locale="fr-FR"
                    textColor="red"
                />
            </View>

This is the result :

Thanks in advance.

Khaled Charkie · Answer 39 · Sun Oct 16 2022 04:01:20 GMT+0800 (China Standard Time)

@iamemiliano you need to wrap it with a state and show it according to it. Have a look in the example

            {show && (
            <DateTimePicker
              testID="dateTimePicker"
              timeZoneOffsetInMinutes={tzOffsetInMinutes}
              minuteInterval={interval}
              maximumDate={maximumDate}
              minimumDate={minimumDate}
              value={date}
              mode={mode}
              is24Hour
              display={display}
              onChange={onChange}
              textColor={textColor || undefined}
              accentColor={accentColor || undefined}
              neutralButtonLabel={neutralButtonLabel}
              disabled={disabled}
            />
          )}`

DanielDelneri · Answer 40 · Wed Nov 02 2022 23:53:04 GMT+0800 (China Standard Time)

I have a problem where the dialog opens twice and I can't pick a date (after I click on a date it get back to the starting one instantly).

`const handleData1 = (event,date)=>{
setShowstart(Platform.OS === 'ios')

if(event.type === "set"){
  setStart(date)
  setShowstart(false)
}

}`

<Text onPress={()=>setShowstart(true)}>{start.toDateString()}</Text> {showStart==true &&(<View> <DateTimePicker value={start} mode="date" textColor='white' style={{ marginBottom:30, marginTop:30, zIndex:1000,}} themeVariant='dark' onChange={handleData1} accentColor="white"/> </View>) }

I've tried to console log the event type and the value of showStart and for example on the dismiss I get 2 console log of event.type dismiss and after I click on the first dialog cancel the second one is still open and the value of showStart is false (how is it possible that even if the value showStart is false it still render the dialog)

Shiza Imtiaz · Answer 41 · Wed Nov 16 2022 22:19:48 GMT+0800 (China Standard Time)

setShowCalendarToDate(Platform.OS === 'ios' ? true : false); //first line of onChange function

This will solve the android issue. But if you do not do this, iOS will start misbehaving. For example, if you set either month, year, or date, the iOS picker will disappear before letting you select all three.

Onikiri1 · Answer 42 · Mon Dec 19 2022 06:41:17 GMT+0800 (China Standard Time)

hi, im working on a task app, and when i use te DateTimePicker, it opens twice and doesnt show the selected date.
i've tried all above and nothing really worked,
this is what im working on
<DateTimePicker value={date} mode={"time"} is24Hour={true} onChange={(event, value) => { setShowDatePicker(!showDatePicker); setDate(selectedDate); }} style={{width: "80%"}} />

Shail Patel · Answer 43 · Mon Dec 19 2022 13:01:13 GMT+0800 (China Standard Time)

This is what you might have done

 const handleConfirm = selectedDateFromPicker => {
    Keyboard.dismiss();
    setDate(prevState => ({
      ...prevState,
      [type]: Helper.convertToIsoDateString(selectedDateFromPicker),
    }));
   **hideDatePicker();** --> _HERE_

You should do something like this

 const handleConfirm = selectedDateFromPicker => {
  **hideDatePicker();** --> _HERE_
    Keyboard.dismiss();
    setDate(prevState => ({
      ...prevState,
      [type]: Helper.convertToIsoDateString(selectedDateFromPicker),
    }));

You should first hide the date picker than you can do any operations you want
This will work. @Onikiri1

I had the same issue. fixed this way and working fine
if you don't get my code let me know i will show you the working of it

Here is the elaborated ansswer

Check this answer

R-s-rawat · Answer 44 · Thu May 18 2023 19:50:55 GMT+0800 (China Standard Time)

yes same here in deadline stage

S. M. Jubayer ⚡️ · Answer 45 · Thu Jun 06 2024 05:50:36 GMT+0800 (China Standard Time)

If anyone is still facing this issue, you can try this easy fix:

const [showDatePicker, setShowDatePicker] = useState(false);

{showDatePicker && (
  <DateTimePicker
    value={new Date()}
    mode={'date'}
    minimumDate={moment().startOf('day').toDate()}
    onChange={(_, newDate) => {
      setShowDatePicker(() => {
        setDate(newDate);
        return false; 
      });
    }}
  />
)}

In onChange, setShowDatePicker's callback function updates the date and then updates the showdatePicker state by returning false.