反应日期选择器文本框键入禁用答案

【问题标题】：react date picker text box typing disable反应日期选择器文本框键入禁用
【发布时间】：2021-03-26 04:34:16
【问题描述】：

我正在为我的表单使用 react-date 选择器。目前它运作良好。但问题是用户可以输入文本作为日期。我需要在此文本框中输入禁用。当用户关注日期选择器文本框时，应加载日历。我是怎么做到的，这是我的日期选择器文本框。

我正在使用下面的库 https://www.npmjs.com/package/react-datepicker

   <DatePicker
            name="invoiceDate"
            className="form-control form-control-sm"
            type="text"
            size="sm"
            placeholder=""
            selected={date}
            value={values.setDate}
            onChange={datePickerChange}
            dateFormat="dd/MM/yyyy"
            readOnly
          />

【问题讨论】：

标签： reactjs react-datepicker

【解决方案1】：

您可以创建自定义输入以获取更多详细信息https://reactdatepicker.com/#example-custom-input

() => {
  const [startDate, setStartDate] = useState(new Date());
  const ExampleCustomInput = forwardRef(
    ({ value, onClick }, ref) => (
      <button className="example-custom-input" onClick={onClick} ref={ref}>
        {value}
      </button>
    ),
  );
  return (
    <DatePicker
      selected={startDate}
      onChange={date => setStartDate(date)}
      customInput={<ExampleCustomInput />}
    />
  );
};```

【讨论】：

【解决方案2】：

简单的解决方案：

在您的返回组件中使用触发 validDateInput 函数的 onInput

import DatePicker from "react-date-picker";


export const AddEmployee = function (props) {
  const validDateInput = function (e) {
    e.target.value = "";
  };

  return (
    <DatePicker
      onInput={(e) => validDateInput(e)}
      maxDate={new Date()}
      
    ></DatePicker>
  );
};

export default AddEmployee;

【讨论】：

【解决方案3】：

根据他们的 github，这似乎可以禁用用户输入

handleDateChangeRaw = (e) => {
    e.preventDefault();
}
render() {
  <DatePicker onChangeRaw={this.handleDateChangeRaw}/>
}

【讨论】：