How to disable 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>

)}

Just for checking, change the `disabled={this.state.disabledDate}` for `disabled={true}` — Alejandro Montilla, Dec 12 '17 at 17:23
Maybe the problem is that you import this component [`import DatePicker from 'react-date-picker';`](https://github.com/wojtekmaj/react-date-picker), and doesnt support disable. Check with [this](https://github.com/Hacker0x01/react-datepicker) — Alejandro Montilla, Dec 12 '17 at 17:37
It seems like yes, the feature may not be supported by 'react-date-picker' — PineCone, Dec 12 '17 at 17:44
I rather went for CSS properties to hide it completely instead of using different date picker. But will definitely use different date picker next time. — PineCone, Dec 12 '17 at 19:43

score 2 · Answer 1 · answered Jul 17 '20 at 08:56

2

<DatePicker
  ref={endCalendarRef}
  readOnly={true}
  .....
  />

answered Jul 17 '20 at 08:56

Ravi Kumar Karunanithi

2,151
2
19
41

score 1 · Accepted Answer · answered Dec 12 '17 at 18:00

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

score 1 · Answer 3 · answered Apr 23 '19 at 19:08

Try this. works for me

const CustomInput = (props) => {
    return (
        <input
            className={[classes.TransparentInput, "uk-input"].join(" ")}
            onClick={props.onClick}
            value={props.value}
            type="text"
            readOnly={true}
        />
    )
}
<DatePicker
  customInput={<CustomInput />}
  name={'from'}
  value={values['from']}
  onChange={e => setFieldValue('from', moment(e).format('L'))}
 />

The setFieldValue is from formik. You can choose not to use formik. your choice.

score 0 · Answer 4 · answered Apr 14 '20 at 08:58

As a hacky workaround (don't feel like taking another library), this worked for me:

Add a disabled class on a container, that wraps the DatePicker

.disabled {
  pointer-events: none;

  input {
    background: transparent;
    box-shadow: none;
    border: none;
  }
}

EDIT: The input styling is only needed, if you wanna make the field look like plain text only.

How to disable component on a button click

4 Answers4