来自“react-native-modal-datetime-picker”的 React Native DateTimePickerModal 不允许我在一个组件中添加 2 个 DateTime 选择器

Question

I need to add 2 DateTimePicker to my component in my React-native app. But only one work even if i add 2. I can open each datetimepicker but only one value change that is the top one. So can select bottom one and will only change the top value. See the code below

import React, { useState } from 'react';
import { Button, View, Text } from 'react-native';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import moment from 'moment';

const Example = () => {
  const [selectedDate, setSelectedDate] = useState();
  const [selectedDate1, setSelectedDate1] = useState();
  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);

  const showDatePicker = () => {
    setDatePickerVisibility(true);
  };

  const hideDatePicker = () => {
    setDatePickerVisibility(false);
  };

  const handleConfirm = (date) => {
    setSelectedDate(date);
    hideDatePicker();
  };

   const handleConfirm1 = (date) => {
    setSelectedDate1(date);
    hideDatePicker();
  };
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{`Date:  ${selectedDate? moment(selectedDate).format("MM/DD/YYYY"):"Please select date"}`}</Text>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm}
        onCancel={hideDatePicker}
      />
       <Text>{`Date:  ${selectedDate1? moment(selectedDate1).format("MM/DD/YYYY"):"Please select date"}`}</Text>
      <Button title="Show Date Picker" onPress={showDatePicker} />
      
      <DateTimePickerModal
        isVisible={isDatePickerVisible}
        mode="date"
        onConfirm={handleConfirm1}
        onCancel={hideDatePicker}
      />
    </View>
  );
};

export default Example;

So I am wondering if it is even possible to add 2 DateTimePicker into one component?

Answer 1

It looks like there is only 1 state handling the opening of the pickers which is causing the first to open each time

const [isDatePickerVisibleOne, setDatePickerVisibilityOne] = useState(false)
const [isDatePickerVisibleTwo, setDatePickerVisibilityTwo] = useState(false)