反应日期选择器禁用手动输入日期

【问题标题】：React datepicker disable entering date manually反应日期选择器禁用手动输入日期
【发布时间】：2021-07-26 10:04:56
【问题描述】：

我正在为我的表单使用 React 日期选择器。目前它运行良好，但用户可以删除日期并输入任何值。如何限制它？

这是我的代码：

import DatePicker from "react-datepicker";

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

【问题讨论】：

标签： javascript reactjs react-datepicker

【解决方案1】：

只需将这行代码添加到DatePicker：

onKeyDown={(e) => {
    e.preventDefault();
}}

添加此event 后，您的组件代码将如下所示：

<DatePicker
    name="invoiceDate"
    className="form-control form-control-sm"
    type="text"
    size="sm"
    placeholder=""
    selected={date}
    minDate={new Date()}
    value={values.setDate}
    onChange={datePickerChange}
    dateFormat="dd/MM/yyyy"
    onKeyDown={(e) => {
       e.preventDefault();
    }}
  />

【讨论】：

这个解决方案是可行的，不像官方的一种形式的github。