在点击 react-date-range 定义的范围时使用回调

Posted 2023-03-16

【中文标题】在点击 react-date-range 定义的范围时使用回调

【英文标题】：Using a callback on click of react-date-range defined ranges

【发布时间】：2021-10-23 10:11:20

【问题描述】：

如何在单击包围的范围时添加回调？我想根据选择的范围更改输入占位符。例如，用户单击“本周”，因此右侧的占位符也应更改为“本周”。我已经把文档变红了，但我找不到我需要的东西。非常感谢您提前提供的帮助！这是我的代码的 sn-p。

  const [dateState, setDateState] = useState<any>([
     startDate: null, endDate: null, key: "selection" ,
  ]);

      openDateRange && (
        <DateRangePicker
          className="date-range"
          editableDateInputs=true
          onChange=(item) => setDateState([item.selection])
          moveRangeOnFirstSelection=false
          ranges=dateState
        />
      )

【参考方案1】：

我有同样的问题， 这是我的解决方法；

在选择范围时，它会在第一次点击时更新两个选择值。

onDateRangeChanged= () => 
.....
if(ranges.selection.startDate !== ranges.selection.endDate)
      const result = calculateDateRangeFromTwoDates(ranges);
      if(result.specificTimeSpan === true)
          toggleRangePicker();
    
.....

---

您可以使用下面的计算器提取您的日期是否定义范围（当然下面的代码可以重构，例如从 Json 文件中读取等）

export const calculateDateRangeFromTwoDates = (ranges: any) => 
  const beginDate = moment(ranges.selection.startDate);
  const endDate = moment(ranges.selection.endDate);
  const today = moment();
  let text = '';
  let specificTimeSpan = true;
  const duration = moment.duration(endDate.diff(beginDate));
  const selectedDateDifference = duration.get('days');

  switch (selectedDateDifference) 
    case 30:
    case 29:
      text = moment(endDate).isSame(today, 'month') ? 'This Month' : 'Last Month';
      break;
    case 7:
    case 6:
      text = moment(endDate).isSame(today, 'week') ? 'This Week' : 'Last Week';
      break;
    case 1:
    case 0:
      text = moment(endDate).isSame(today, 'day') ? 'Today' : 'Yesterday';
      break;
    default:
      text = `
      $moment(ranges.selection.startDate).format('MM/DD/YYYY') - $moment(ranges.selection.endDate).format(
        'MM/DD/YYYY',
      )
      `;
      specificTimeSpan = false;
      break;
  

  return (
    text,
    specificTimeSpan
  )
;