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')}
/>
)
}
}
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;
}
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.