react-date-range create custom inputRanges

Question

I'm using the react-date-range component and want to add some of my own custom inputRanges on the left side of the interface. At the moment it has, yesterday, last week, last month etc. I want to add "this year", "last year", "12 months previous"

I'm able to remove the preset ranges by using

inputRanges={[]}

But I'm struggling to determine how to add my own ranges. I see the shape of the range object is:

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

but populating the object and passing it into inputRanges as an array element doesn't work either:

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

I'm reading the documentation here but it's not helping much: https://www.npmjs.com/package/react-date-range

Answer 1

You need to pass staticRanges prop to the DateRangePicker component. Additionally, if you want to include the default ranges of the library, you can pass ...defaultStaticRanges, as the first argument of the array. You can take a look at this sandbox for live working example.

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

Answer 2

Also if you want to remove just one of the default input ranges or change the label you can do something like this.

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

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