javascript - 反应日期选择器禁用手动输入日期
问题描述
我正在为我的表单使用 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"
/>
解决方案
只需将这行代码添加到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();
}}
/>
推荐阅读
- c# - Unity 2D Tilemap Custom Hexagonal Rule Tile
- javascript - 在传递给图像 src 之前检查承诺是否已解决
- html - 如何使响应式引导元素方形
- selenium - Selenium Chorme 无法添加 Cookie
- python - 为什么 __init__.py 中定义的函数在该包的 python 文件中不可见?
- python - 注释自己的数据集以转换成forge的格式
- c++ - 如何理解这个模板在 STL 源代码中的用法?
- javascript - 在 DynamoDB 中将空字符串设置为 null
- python - 如何使用 concat 或 merge 合并两个数据帧?
- mysql - 需要帮助加快查询速度 (FROM_UNIXTIME)