response-date-range создать настраиваемый inputRanges

Question

Я использую компонент response-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

Answer 1

Вам нужно пройти 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>
  );
}

Answer 2

Также, если вы хотите удалить только один из диапазонов ввода по умолчанию или изменить метку, вы можете сделать что-то вроде этого.

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

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