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')}
        />
    )
}

}

Answer 1

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

Answer 2

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.