1

我想要两个日期，一个是开始日期，另一个是结束日期，但现在的问题是当我更改开始日期时，自动结束日期也在变化，反之亦然。我正在使用这个 = 'react-native-date-picker';

这是我的代码

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

忽略它=我想要两个日期，一个是开始日期，另一个是结束日期，但现在的问题是当我更改开始日期时自动结束日期也在变化，反之亦然。我正在使用这个 = 'react-native-date-picker'; 我想要两个日期，一个是开始日期，另一个是结束日期，但现在的问题是当我更改开始日期时，自动结束日期也在变化，反之亦然。我正在使用这个 = 'react-native-date-picker';

4

2 回答 2

0

将包更新到版本4.1.1，您的问题将得到解决。

有关您的问题的更多信息，请参见此处。

于 2021-11-03T21:49:05.913 回答
0

您将需要在组件末尾有一个 Datepicker，您只需要处理导致此选择器打开的原因，即开始日期或结束日期。这是代码示例

  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)
    }}
  />
于 2021-09-22T05:27:54.033 回答