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

Question

How can we add a callback when clicked the encircled ranges? I want to change the input placeholder based on the range picked. For example the user clicked "This week" so the placeholder also on the right should be changed to "This week". I've red the documentation but I cant find thing I need. Thank you so much for your help in advance. Here's a snippet of my code.

  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

I had the same issue, here is my workaround ;

while selecting ranges it updates both selection values in the very first click.

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

---

and with the calculator below u can extract whether your dates is defined range or not (of course code below can be refactored like reading from a Json file etc.)

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

Answer 2

export const getDateText = (dateRange) => {
        let text = "";
        if (dateRange && dateRange.selection.startDate && dateRange.selection.endDate) {
            const beginDate = moment(dateRange.selection.startDate);
            const endDate = moment(dateRange.selection.endDate);
            const today = moment();
            const yesterday = moment().subtract(1, "day");
            const startOfThisWeek = moment().startOf("week");
            const startOfPreviousWeek = moment().subtract(1, "week").startOf("week");
            const endOfPreviousWeek = moment().subtract(1, "week").endOf("week");
            const startOfThisMonth = moment().startOf("month");
            const startOfPreviousMonth = moment().subtract(1, "month").startOf("month");
            const endOfPreviousMonth = moment().subtract(1, "month").endOf("month");
            if (beginDate.format("DD-MM-YYYY") === today.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === today.format("DD-MM-YYYY")) {
                text = "Today";
            } else if (beginDate.format("DD-MM-YYYY") === yesterday.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === yesterday.format("DD-MM-YYYY")) {
                text = "Yesterday";
            } else if (beginDate.format("DD-MM-YYYY") === startOfThisWeek.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === today.format("DD-MM-YYYY")) {
                text = "This Week";
            } else if (beginDate.format("DD-MM-YYYY") === startOfPreviousWeek.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === endOfPreviousWeek.format("DD-MM-YYYY")) {
                text = "Last Week";
            } else if (beginDate.format("DD-MM-YYYY") === startOfThisMonth.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === today.format("DD-MM-YYYY")) {
                text = "This Month";
            } else if (beginDate.format("DD-MM-YYYY") === startOfPreviousMonth.format("DD-MM-YYYY") &&
                endDate.format("DD-MM-YYYY") === endOfPreviousMonth.format("DD-MM-YYYY")) {
                text = "Last Month";
            } else {
                text = `${beginDate.format("DD-MM-YYYY")} / ${endDate.format("DD-MM-YYYY")}`;
            }
        }
        return text;
    };