确定反应日期范围内的选定日期范围

Question

我正在使用react-date-range插件来选择日期范围。

import { DateRangePicker} from 'react-date-range';
import 'react-date-range/dist/styles.css';
import 'react-date-range/dist/theme/default.css';

以下功能用于在选择范围时处理日期范围

    function handleSelect() {
            
    }

我这样添加了DateRangePicker

const selectionRange = {
    startDate: new Date(),
    endDate: new Date(),
    key: 'selection',
}

<div>
    <DateRangePicker
    ranges={[selectionRange]}
    onChange={handleSelect}/>
</div>

我想在handleChange函数旁边对选定的日期范围进行一些操作。但是我找不到如何识别选择哪个日期范围以及相应的开始和结束日期。

在文档中，onChange回调描述为

但是我不明白如何获取这些startDate和endDate参数。 有人可以帮我获得这个价值。

文档：https://openbase.io/js/react-date-range/documentation

Answer 1

根据the documentation，onChange回调收到ranges作为参数：

import { DateRangePicker } from 'react-date-range';

class MyComponent extends Component {
  handleSelect(ranges){
    console.log(ranges);
    // {
    //   selection: {
    //     startDate: [native Date Object],
    //     endDate: [native Date Object],
    //   }
    // }
  }
  render(){
    const selectionRange = {
      startDate: new Date(),
      endDate: new Date(),
      key: 'selection',
    }
    return (
      <DateRangePicker
        ranges={[selectionRange]}
        onChange={this.handleSelect}
      />
    )
  }
}

它应该是一个具有键selection的对象，该键本身就是一个包含startDate和endDate的对象。