React Date Range无法通过两次点击设置日期范围，求解决方案

要实现两次点击分别设置起止日期的效果，你需要手动维护选择状态并拦截日期点击事件，替代组件默认的“单次点击设为同一天范围”的行为。以下是具体的修改方案：

核心思路 #

1. 在子组件内部维护本地的日期范围状态，避免直接依赖父组件状态导致的同步问题。
2. 标记选择阶段：第一次点击仅设置开始日期，等待第二次点击设置结束日期。
3. 处理日期顺序：确保结束日期始终晚于或等于开始日期。
4. 保留拖拽选择的支持，兼容两种操作方式。

修改后的子组件代码 #

import { useState, useEffect } from 'react';
import { DateRangePicker, DateRangeType, Calendar } from 'react-date-range';

const DateRangePickerCalendar = ({ dateRange, handleSelectDate, isTablet, staticRanges, copiedDefaultInputRanges, pl }) => {
  // 维护本地日期范围状态
  const [localRange, setLocalRange] = useState<DateRangeType>({ ...dateRange[0] });
  // 标记是否已选择开始日期，等待选择结束日期
  const [isAwaitingEndDate, setIsAwaitingEndDate] = useState(false);

  // 同步父组件传入的日期范围变化
  useEffect(() => {
    setLocalRange({ ...dateRange[0] });
    setIsAwaitingEndDate(false);
  }, [dateRange]);

  const handleDateClick = (date: Date) => {
    if (!isAwaitingEndDate) {
      // 第一次点击：设置开始日期，清空结束日期
      if (localRange.startDate?.getTime() === date.getTime()) {
        // 点击当前已选的开始日期，重置选择状态
        setLocalRange({ ...dateRange[0] });
        return;
      }
      setLocalRange({
        ...localRange,
        startDate: date,
        endDate: undefined,
      });
      setIsAwaitingEndDate(true);
    } else {
      // 第二次点击：设置结束日期，自动调整日期顺序
      const startDate = localRange.startDate!;
      const [newStart, newEnd] = date < startDate ? [date, startDate] : [startDate, date];

      const finalRange = {
        ...localRange,
        startDate: newStart,
        endDate: newEnd,
      };

      // 更新本地状态并通知父组件
      setLocalRange(finalRange);
      handleSelectDate([finalRange] as DateRangeType[]);
      setIsAwaitingEndDate(false);
    }
  };

  return (
    <DateRangePicker
      onChange={(item) => {
        // 处理拖拽选择的情况
        const selectedRange = item.selection;
        if (selectedRange.startDate && selectedRange.endDate) {
          setLocalRange(selectedRange);
          handleSelectDate([selectedRange] as DateRangeType[]);
          setIsAwaitingEndDate(false);
        }
      }}
      moveRangeOnFirstSelection={false}
      months={2}
      ranges={[localRange]}
      direction={isTablet ? 'vertical' : 'horizontal'}
      staticRanges={staticRanges}
      inputRanges={copiedDefaultInputRanges}
      locale={pl}
      // 自定义Calendar组件以监听日期点击事件
      renderCalendar={(calendarProps) => (
        <Calendar {...calendarProps} onDateClick={handleDateClick} />
      )}
    />
  );
};

export default DateRangePickerCalendar;

父组件的handleSelectDate函数补充 #

确保父组件的回调函数正确更新状态：

const handleSelectDate = (newDateRange) => {
  setData(prev => ({
    ...prev,
    date: newDateRange,
  }));
};

关键说明 #

• 通过renderCalendar自定义Calendar组件，获取onDateClick事件的控制权，实现两次点击的逻辑。
• 本地状态isAwaitingEndDate标记选择阶段，区分第一次和第二次点击的行为。
• 处理了“点击已选开始日期重置选择”的边界情况，提升用户体验。
• 保留了原有的拖拽选择支持，两种操作方式互不冲突。

内容的提问来源于stack exchange，提问作者Bartosz Rowiński