在 react-date-range 中确定选定的日期范围

Question

我正在使用 react-date-range 插件来 select 一个日期范围。

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

以下函数用于处理范围为 selected

时的日期范围

    function handleSelect() {
            
    }

我已经像这样添加了 DateRangePicker

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

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

我想在 handleChange 函数中对 selected 日期范围进行一些操作。但我找不到如何确定 selected 的日期范围以及相应的开始和结束日期。

在文档中，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 的对象。

Answer 2

我的解决方案是：

const onChange = (item) => {
    if (item.selection.endDate !== item.selection.startDate) {
        console.log(item);
        setIsPopoverOpen(false);
    }
    setRange([item.selection]);
}

在 react-date-range 中确定选定的日期范围

Identify selected date range in react-date-range

date-range

reactjs