How to hide only one predefined inputRange

[JayWebz]

Subject of the issue

Much like this issue, https://github.com/hypeserver/react-date-range/issues/404, I'd like to know if there is a way through the inputRanges property on the <DateRangePicker/> component to hide the "Days starting today" row, but keep the "Days up to today" row.

[jjolmo]

As a workaround, at least we can hide it via css

[felipeloha]

take the list and remove one. I remove all of them as inputRanges={[]}

[SuarezLuis]

Little hacky but it works:

useEffect(() => {
    document.getElementsByClassName('rdrInputRange')[1].remove();
  }, []);

[kamyar]

Something like this should work:

import {
  addDays,
  endOfDay,
  startOfDay,
  isSameDay,
} from 'date-fns';
import { useState } from 'react';

const [state, setState] = useState({
  selection: {
    startDate: new Date(),
    endDate: null,
    key: 'selection'
  },
  compare: {
    startDate: new Date(),
    endDate: addDays(new Date(), 3),
    key: 'compare'
  }
});

<DateRangePicker
  onChange={item => setState({ ...state, ...item })}
  months={1}
  minDate={addDays(new Date(), -30)}
  maxDate={addDays(new Date(), 30)}
  editableDateInputs={true}
  direction="vertical"
  staticRanges={[]}
  inputRanges={[
    {
    label: 'days up to today',
    range(value) {
      return {
        startDate: addDays(startOfDay(new Date()), (Math.max(Number(value), 1) - 1) * -1),
        endDate: endOfDay(new Date()),
      };
    },
    getCurrentValue(range) {
      if (!isSameDay(range.endDate, endOfDay(new Date()))) return '-';
      if (!range.startDate) return '∞';
      return differenceInCalendarDays(endOfDay(new Date()), range.startDate) + 1;
    },
    isSelected(range) {
      const definedRange = this.range();
      return (
        isSameDay(range.startDate, definedRange.startDate) &&
        isSameDay(range.endDate, definedRange.endDate)
      );
    },
  },
  ]}
  scroll={{ enabled: true }}
  ranges={[state.selection, state.compare]}
/>;

[kamyar]