React Native日期选择器：实现FromDate与ToDate互斥限制需求

针对你需要的 FromDate 和 ToDate 互相约束的需求，我们可以通过动态设置日期选择器的minimumDate和maximumDate来实现，下面是修改后的完整代码及逻辑说明：

修改后的完整代码 #

import React, { useState } from 'react';
import DatePicker from '@react-native-community/datetimepicker'; // 根据你实际使用的DatePicker库调整

const DateRangePicker = () => {
  const [currentPickerDate, setCurrentPickerDate] = useState(new Date());
  const [openToDatePicker, setOpenToDatePicker] = useState(false);
  const [openFromDatePicker, setOpenFromDatePicker] = useState(false);
  // 改为存储Date对象，避免字符串比较的精度问题
  const [fromDate, setFromDate] = useState(null);
  const [toDate, setToDate] = useState(null);
  const [fromDateFilter, setFromDateFilter] = useState(false);
  const [toDateFilter, setToDateFilter] = useState(false);

  // 获取一个月前的日期，作为全局最小可选日期
  const getOneMonthBefore = () => {
    const today = new Date();
    const oneMonthBefore = new Date(today);
    oneMonthBefore.setMonth(today.getMonth() - 1);
    // 重置时分秒，避免时间差异导致的日期比较错误
    oneMonthBefore.setHours(0, 0, 0, 0);
    return oneMonthBefore;
  };

  // 获取当前日期，作为全局最大可选日期（禁止选择未来日期）
  const getToday = () => {
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    return today;
  };

  return (
    <>
      {/* 触发开始日期选择器的按钮 */}
      <button onPress={() => setOpenFromDatePicker(true)}>
        选择开始日期: {fromDate ? fromDate.toLocaleDateString() : '未选择'}
      </button>

      {/* 触发结束日期选择器的按钮 */}
      <button onPress={() => setOpenToDatePicker(true)}>
        选择结束日期: {toDate ? toDate.toLocaleDateString() : '未选择'}
      </button>

      <DatePicker
        modal
        open={openFromDatePicker || openToDatePicker}
        date={currentPickerDate}
        // 根据当前打开的选择器，动态设置约束日期
        minimumDate={openFromDatePicker 
          ? getOneMonthBefore() 
          : fromDate || getOneMonthBefore()}
        maximumDate={openFromDatePicker 
          ? toDate || getToday() 
          : getToday()}
        mode="date"
        onConfirm={(selectedDate) => {
          const confirmedDate = selectedDate || currentPickerDate;
          setCurrentPickerDate(confirmedDate);
          
          if (openFromDatePicker) {
            setOpenFromDatePicker(false);
            setFromDate(confirmedDate);
            setFromDateFilter(true);
            // 若已选结束日期早于新选的开始日期，重置结束日期
            if (toDate && toDate < confirmedDate) {
              setToDate(null);
              setToDateFilter(false);
            }
          } else {
            setOpenToDatePicker(false);
            setToDate(confirmedDate);
            setToDateFilter(true);
            // 若已选开始日期晚于新选的结束日期，重置开始日期
            if (fromDate && fromDate > confirmedDate) {
              setFromDate(null);
              setFromDateFilter(false);
            }
          }
        }}
        onCancel={() => {
          setOpenFromDatePicker(false);
          setOpenToDatePicker(false);
        }}
      />
    </>
  );
};

export default DateRangePicker;

关键逻辑说明 #

1. 日期存储类型调整：将fromDate和toDate改为存储Date对象，避免字符串比较的精度问题，直接用> <即可准确比较日期先后。
2. 动态约束日期范围：
   • 打开开始日期选择器时：
     • 最小日期固定为一个月前（保留原有需求）
     • 最大日期为已选的结束日期（如果有），否则为当天，确保开始日期不会晚于结束日期
   • 打开结束日期选择器时：
     • 最小日期为已选的开始日期（如果有），否则为一个月前，确保结束日期不会早于开始日期
     • 最大日期固定为当天（保留原有需求）
3. 冲突日期自动修正：当用户选择的新日期与已选日期冲突时，自动重置冲突的日期，避免出现无效的日期范围。
4. 时间精度修正：给所有用于比较的日期对象重置时分秒为0，避免同一天不同时间点导致的比较错误。

内容的提问来源于stack exchange，提问作者Shubh