How to disable <react-date-picker> component on a button click

Question

I have used a date picker component from react-date-picker. I need to disable the entire date control and the button itself on a single button click. The button does get disabled but the DatePicker component doesn't. I have tried the following but didn't work. Is there a correct way to do it?

import DatePicker from 'react-date-picker';
...
...
this.state = {
  disabledDate: false
}
    ...
    ...
    ...

  noDateRememberButtonClick() {
    this.setState({
      disabledDate: true
    });
  }

    render() {
           return(
        <div className="wrapper">
          <div className="date-picker">
            <DatePicker
              onChange={this.dateOnChange}
              value={this.state.boughtDate}
              disabled={this.state.disabledDate} />
          </div>
          <button className="btn" onClick={this.noDateRememberButtonClick} disabled={this.state.disabledDate} type="button"> {BUTTON_LABEL}</button>
        </div>

)}

Answer 1

react-date-picker doesn't support the disabled prop. See https://github.com/wojtekmaj/react-date-picker

Per shaz's recommendation, react-datepicker (https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) does, if you would like to use that component instead