How To Use Two React Native date Picker modal in same component

Question

I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa. I am using this = 'react-native-date-picker';

here is my code

import DatePicker from 'react-native-date-picker';

 const [date, setDate] = useState(new Date());
  const [dateForEndDate, setDateForEndDate] = useState(new Date());
  const [open, setOpen] = useState(false);
  const [openForEndDate, setOpenForEndDate] = useState(false);


  {/* {dealprice === '' || ( */}
            <TouchableOpacity onPress={() => setOpen(true)}>
              <View
                style={{
                  width: wp('75%'),
                  flexDirection: 'row',
                  backgroundColor: '#F2F3F5',
                  borderRadius: 5,
                  height: 40,
                  marginTop: '5%',
                }}>
                <View
                  style={{
                    marginLeft: 15,
                    justifyContent: 'center',
                    height: 40,
                  }}>
                  <MaterialIcons name="date-range" size={23} color="#E73952" />
                </View>

                {/* <Button title="Open" onPress={() => setOpen(true)} /> */}
                <DatePicker
                  modal
                  mode="date"
                  open={open}
                  date={date}
                  onConfirm={(date) => {
                    setOpen(false);
                    setDate(date);
                  }}
                  onCancel={() => {
                    setOpen(false);
                  }}
                />
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginLeft: '3%',
                  }}>
                  <Text>{date.toDateString()}</Text>
                </View>
              </View>
            </TouchableOpacity>
            {/* )} */}

            {/* {dealprice === '' || ( */}
            <TouchableOpacity onPress={() => setOpenForEndDate(true)}>
              <View
                style={{
                  width: wp('75%'),
                  flexDirection: 'row',
                  backgroundColor: '#F2F3F5',
                  borderRadius: 5,
                  height: 40,
                  marginTop: '5%',
                }}>
                <View
                  style={{
                    marginLeft: 15,
                    justifyContent: 'center',
                    height: 40,
                  }}>
                  <MaterialIcons name="date-range" size={23} color="#E73952" />
                </View>

                <DatePicker
                  modal
                  mode="date"
                  open={openForEndDate}
                  date={dateForEndDate}
                  onConfirm={(dateForEndDate) => {
                    setOpenForEndDate(false);
                    setDateForEndDate(dateForEndDate);
                  }}
                  onCancel={() => {
                    setOpenForEndDate(false);
                  }}
                />
                <View
                  style={{
                    justifyContent: 'center',
                    alignItems: 'center',
                    marginLeft: '3%',
                  }}>
                  <Text>{dateForEndDate.toDateString()}</Text>
                </View>
              </View>
            </TouchableOpacity>
            {/* )} */}

ignore it = I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa. I am using this = 'react-native-date-picker'; I want two dates one is start date and other is end date but now the problem is when I change Start Date Automatically end date is also changing and same vice versa. I am using this = 'react-native-date-picker';

Answer 1

You will need to have a single Datepicker at the end of the component and you just need to handle that what cause this picker to open ie Start Date or End Date. Here is code example

  import moment from 'moment'
   .... 
  const DateFormat = "DD/MM/YYYY";
  const [startDate, setStartDate] = 
  useState(moment().format(DateFormat))
 const [endDate, setEndDate] = useState(moment().add(1, 
 'year').format(DateFormat))
 const [dateVisible, setDateVisibleState] = useState(0) // 0-hide , 1-start 
 //date, 2-end date
 const dateVisibleRef = useRef(0)
 const setDateVisible = (val) => {
 dateVisibleRef.current = val
 setDateVisibleState(val)
 }
 const [calendarDate, setCalendarDate] = useState(new Date())

 ....
 
  <DateTimePicker
    modal
    mode="date"
    open={dateVisibleRef.current > 0}
    date={calendarDate}
    onDateChange={setCalendarDate}
    onConfirm={(date) => {
      let state = dateVisibleRef.current
      setDateVisible(0)
      if (state == 1)
        setStartDate(moment(date).format(DateFormat))
      else if (state == 2)
        setEndDate(moment(date).format(DateFormat))
    }}
    onCancel={() => {
      setDateVisible(0)
    }}
  />

Answer 2

Update the package to version 4.1.1 and your issue will be resolved.

More information about your issue is found here .