时间戳

首页 > 解决方案 > react-date-range 创建自定义 inputRanges

reactjs - react-date-range 创建自定义 inputRanges

问题描述

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

标签： reactjsreact-daterange-picker

解决方案

您需要将staticRangesprop 传递给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>
  );
}

推荐阅读