How to remove input range from react date range picker?

Question

Image is showing date range picker

I want to remove days up to today and days starting today both label from date range picker how can i do that my code snippet is,

class BetterDatePicker extends Component {
constructor(props) {
    super(props);
    this.state = {
        selectionRange: {
            startDate: new Date(),
            endDate: new Date(),
            key: 'selection',
        }
    }
}
handleSelect = (ranges) => {
    console.log("range", ranges);
    this.setState({
        selectionRange: ranges.selection
    })
}
render() {
    return (
        <DateRangePicker
            ranges={[this.state.selectionRange]}
            onChange={this.handleSelect}
            minDate={new Date('2020')}
            maxDate={new Date('2022')}
        />
    )
}

}

Hello hello, you will probably be better off, looking at the library's code, checking if the component can actually be disabled, and if not opening an issue on the repository. You will most likely not get an answer to this here, unless some member of their team sees this issue (which is unlikely I think). Hope you find your answer. — Elias, Apr 09 '21 at 06:40

score 8 · Answer 1 · answered Jun 16 '21 at 13:58

You can simply do this with the following code:

<DateRangePicker
    staticRanges={[]}
    inputRanges={[]}
/>

The inputRanges with an empty array hides the 'days up to today' and 'days starting today'. The staticRanges with an empty array hides the buttons saying 'Yesterday' etc.

You can see these documented here: https://www.npmjs.com/package/react-date-range

I also added a line of CSS to hide the container for these inputs:

.rdrDefinedRangesWrapper {
    display: none;
}

```.rdrInputRanges { display: none; }``` If you want to hide only input ranges, you need to add above CSS — user5714726, Aug 05 '22 at 09:49

score 0 · Answer 2 · answered Dec 16 '21 at 07:09

In order to hide that simply add the following line in the global CSS file of your project, it will override the react-date-range component's style.

.rdrDefinedRangesWrapper {
      display: none;
 }

In my case where I am working on a Next.js project I just added the above code in styles/globals.css, I have also attached the snippet of my globals.css file below.

html,
body {
  padding: 0;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

* {
  box-sizing: border-box;
}
/*to hide left panel from date range picker */
.rdrDefinedRangesWrapper {
  display: none;
}

My react-date-range component after adding above code.

How to remove input range from react date range picker?

2 Answers2