单击 react-date-range 定义的范围使用回调

Question

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

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

Answer 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
  })
};

单击 react-date-range 定义的范围使用回调

Using a callback on click of react-date-range defined ranges

reactjs

react-datepicker

react-daterange-picker