如何在单击按钮时禁用 <react-date-picker> 组件

Question

我使用了 react-date-picker 的日期选择器组件。我需要在单击按钮时禁用整个日期控件和按钮本身。该按钮确实被禁用，但 DatePicker 组件没有。我尝试了以下但没有用。有正确的方法吗？

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 不支持 disabled 属性。参见 https://github.com/wojtekmaj/react-date-picker

根据 shaz 的建议，react-datepicker (https://github.com/Hacker0x01/react-datepicker/blob/master/docs/datepicker.md) 可以，如果您想改用该组件

Answer 2

试试这个。适合我

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

setFieldValue 来自 formik。您可以选择不使用 formik。你的选择。

Answer 3

作为一个 hacky 解决方法（不想使用另一个库），这对我有用：

在包装 DatePicker

的容器上添加 disabled class

.disabled {
  pointer-events: none;

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

编辑：输入样式只需要，如果你想让字段看起来像纯文本。

Answer 4

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

如何在单击按钮时禁用 <react-date-picker> 组件

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

reactjs

ecmascript-6

react-datepicker