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

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

在容器上添加一个 disabled 类，该类包装DatePicker

Equatable

编辑：仅当您想使字段看起来像纯文本时，才需要 input 样式。

Answer 4

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

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

4 个答案: