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

Posted 2023-02-21

【中文标题】在 react-date-range 中识别选定的日期范围

【英文标题】：Identify selected date range in react-date-range

【发布时间】：2021-01-24 08:39:12

【问题描述】：

我正在使用 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

【问题讨论】：

您将在其处理函数handleSelect(date) console.log(date); // native Date object 中获得选定的日期范围@

【参考方案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 的对象。

【讨论】：

点击日期输入后如何打开DateRange？我的意思是，我不想一直打开它。

【参考方案2】：

我的解决办法是：

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