反應日期范圍創建自定義輸入范圍

Question

我正在使用 react-date-range 組件，並想在界面左側添加一些我自己的自定義 inputRanges。 目前有昨天、上周、上個月等。我想添加“今年”、“去年”、“12 個月前”

我可以通過使用刪除預設范圍

inputRanges={[]}

但我正在努力確定如何添加我自己的范圍。 我看到范圍 object 的形狀是：

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

但是填充 object 並將其作為數組元素傳遞到 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

Answer 1

此外，如果您只想刪除一個默認輸入范圍或更改 label，您可以執行類似的操作。

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

     <DateRangePicker
          ...props
          inputRanges={[{
            ...defaultInputRanges[0],
            label: 'Your new label'
          }]}
        />

Answer 2

您需要將staticRanges道具傳遞給DateRangePicker組件。 此外，如果要包含庫的默認范圍，可以傳遞...defaultStaticRanges作為數組的第一個參數。 您可以查看 此沙箱的實時工作示例。

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