react-date-range 创建自定义 inputRanges

Posted 2023-03-16

【中文标题】react-date-range 创建自定义 inputRanges

【英文标题】：react-date-range create custom inputRanges

【发布时间】：2021-12-07 14:38:30

【问题描述】：

我正在使用 react-date-range 组件，并想在界面左侧添加一些我自己的自定义 inputRanges。目前有，昨天，上周，上个月等。我想添加“今年”，“去年”，“12个月前”

我可以使用删除预设范围

inputRanges=[]

但我正在努力确定如何添加我自己的范围。我看到范围对象的形状是：

   startDate: PropTypes.object,
   endDate: PropTypes.object,
   color: PropTypes.string,
   key: PropTypes.string,
   autoFocus: PropTypes.bool,
   disabled: PropTypes.bool,
   showDateDisplay: PropTypes.bool,
 

但是填充对象并将其作为数组元素传递给 inputRanges 也不起作用：

 inputRanges=[
              startDate: new Date(),
              endDate: new Date(),
              color: "#eecc99",
              key: "Today",
              autoFocus: false,
              disabled: false,
              showDateDisplay: true,
            ]

我正在阅读这里的文档，但没有多大帮助：https://www.npmjs.com/package/react-date-range

【参考方案1】：

您需要将staticRanges 属性传递给DateRangePicker 组件。此外，如果要包含库的默认范围，可以传递 ...defaultStaticRanges 作为数组的第一个参数。 您可以查看this sandbox 的实时工作示例。

import 
  addDays,
  endOfDay,
  startOfDay,
  startOfYear,
  startOfMonth,
  endOfMonth,
  endOfYear,
  addMonths,
  addYears,
  startOfWeek,
  endOfWeek,
  isSameDay,
  differenceInCalendarDays
 from "date-fns";
import  useState  from "react";
import  DateRangePicker, defaultStaticRanges  from "react-date-range";
import "react-date-range/dist/styles.css"; // main css file
import "react-date-range/dist/theme/default.css"; // theme css file
import "./styles.css";

export default function App() 
  const [state, setState] = useState([
    
      startDate: new Date(),
      endDate: addDays(new Date(), 7),
      key: "selection"
    
  ]);
  return (
    <div className="App">
      <DateRangePicker
        onChange=(item) => setState([item.selection])
        showSelectionPreview=true
        moveRangeOnFirstSelection=false
        months=2
        ranges=state
        direction="horizontal"
        staticRanges=[
          ...defaultStaticRanges,
          
            label: "last year",
            range: () => (
              startDate: startOfYear(addYears(new Date(), -1)),
              endDate: endOfYear(addYears(new Date(), -1))
            ),
            isSelected(range) 
              const definedRange = this.range();
              return (
                isSameDay(range.startDate, definedRange.startDate) &&
                isSameDay(range.endDate, definedRange.endDate)
              );
            
          ,
          
            label: "this year",
            range: () => (
              startDate: startOfYear(new Date()),
              endDate: endOfDay(new Date())
            ),
            isSelected(range) 
              const definedRange = this.range();
              return (
                isSameDay(range.startDate, definedRange.startDate) &&
                isSameDay(range.endDate, definedRange.endDate)
              );
            
          
        ]
      />
      ;
    </div>
  );