Question: Is it possible to edit the left panel of DateRangePicker

[Breigner01]

Subject of the issue

So, I want to implement DateRangePicker on my website, the only issue is that the left panel (circled in red) doesn't have the presets that I need: So my question is, can I somehow edit it through props? If so, how can I do it? I didn't seem to find how to do it.

Thanks in advance

[BUG] Bug Reproduce Steps

use a DateRangePicker component

[BUG] Expected behaviour

I'd like to be able to set these quick ranges to custom ones.

Environment

Package Version: 1.4.0 React version: 17.0.2 Node version: 17.3.0 Browser: Firefox Developer Edition 97.0b9

[stylder]

I have the same problem

[Multi-Thinker]

same

[ArtNous]

Same problem. I want to remove that container

[benjamincharity]

To simply hide the container altogether, you can use CSS:

'.rdrDefinedRangesWrapper': {
  display: isMobile ? 'none' : 'block',
},

To edit what is inside the left panel, pass a new collection of static ranges:

const staticRanges = createStaticRanges([
  {
    label: 'Today',
    range: () => ({
      startDate: definedTimes.startOfToday,
      endDate: definedTimes.endOfToday,
    }),
  },
  {
    label: 'This Month',
    range: () => ({
      startDate: definedTimes.startOfMonth,
      endDate: definedTimes.endOfMonth,
    }),
  },
  {
    label: 'Last Month',
    range: () => ({
      startDate: definedTimes.startOfLastMonth,
      endDate: definedTimes.endOfLastMonth,
    }),
  },
  {
    label: 'Last 6 Months',
    range: () => ({
      startDate: definedTimes.startOfLastSixMonths,
      endDate: definedTimes.endOfMonth,
    }),
  },
]);

<DateRangePicker
  ...
  staticRanges={staticRanges}
/>

[muskanjain16]

staticRanges={[]}

With this, I have removed left panel but blank white space is still there of left panel.

React.useEffect(() => { document.getElementsByClassName('rdrDefinedRangesWrapper')[0].style.display = 'none'; }, []);

I have added this and removed white space also.

[Sailokeshg]

To simply hide the container altogether, you can use CSS:

'.rdrDefinedRangesWrapper': {
  display: isMobile ? 'none' : 'block',
},

To edit what is inside the left panel, pass a new collection of static ranges:

const staticRanges = createStaticRanges([
  {
    label: 'Today',
    range: () => ({
      startDate: definedTimes.startOfToday,
      endDate: definedTimes.endOfToday,
    }),
  },
  {
    label: 'This Month',
    range: () => ({
      startDate: definedTimes.startOfMonth,
      endDate: definedTimes.endOfMonth,
    }),
  },
  {
    label: 'Last Month',
    range: () => ({
      startDate: definedTimes.startOfLastMonth,
      endDate: definedTimes.endOfLastMonth,
    }),
  },
  {
    label: 'Last 6 Months',
    range: () => ({
      startDate: definedTimes.startOfLastSixMonths,
      endDate: definedTimes.endOfMonth,
    }),
  },
]);

<DateRangePicker
  ...
  staticRanges={staticRanges}
/>

is there a possibility to disable the selection of all dates when i click on particular date range For example , if i click on past year , i want the dates of last year not to be highlited but being selected in background

[Sailokeshg]

Is there a possibility to disable the selection of all dates when i click on particular date range ? For example , if i click on past year , i want the dates of last year not to be highlited but being selected in background

[bexoss]

@benjamincharity Where definedTimes coming from?

[benjamincharity]

@benjamincharity Where definedTimes coming from?

@bexoss I took the base from this repo and edited it for my needs. See here: https://github.com/hypeserver/react-date-range/blob/master/src/defaultRanges.js