Dialog opens twice on Android

[Niore]

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

[tranhoangduong1994]

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

[Niore]

no still got no solution for it.

[crcass]

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.

[Freerider689]

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]

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

[vancepope]

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

[mefjuu]

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

[androdri1998]

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}
        />)
  }

[nisiybr]

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]

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]

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]

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 !

[vishwa1937]

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.

[sjonchhe]

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

[Luckygirlllll]

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]

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

[rakefetWorkiz]

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

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

worked like a charm :)

[jkdc]

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!

[rossenv]

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

[ChanakaChampSoft]

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-koshta]

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

[hiepnh610]

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]

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.

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

[mefjuu]

I tried this workaround. Works fine.

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

[kapilwhaval]

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

[yayidg22]

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

to

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

[danibrear]

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!

[laryssonalves]

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]

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

[renatomh]

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

[renatomh]

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]

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.

[vonovak]

Hello 👋 , this issues should be resolved in https://github.com/react-native-datetimepicker/datetimepicker/pull/574

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

[Shail-Patel-1]

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

[chefk5]

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!

[Suliman-A]

DatePickerModal

which debugger do you mean exactly?

[iamemiliano]

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.

[chefk5]

@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]

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)

[ShizaSiddiqui]

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]

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-1]

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]

yes same here in deadline stage

[SadatJubayer]

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.