如何禁用Reactstrap日期输入框的键盘输入，仅保留日历选择？

使用Reactstrap的Input组件（type为"date"），代码如下：

<Input type="date" name="date" 
    onChange={this.setStart}
    style={{backgroundColor:"white",marginTop:10,height:50}}
    value={this.state.order.start_date}
    defaultValue={this.state.order.start_date}
    id="exampleDate" placeholder={translate("Start Date")} />

该组件会生成右侧带日历图标的输入框，点击图标可弹出日历选择器。现需阻止用户通过键盘修改日期以避免输入无效日期，尝试过onKey*系列事件但未成功，请问如何实现仅依赖日历选择器修改日期？

方法一：拦截键盘与粘贴事件 #

给Input组件添加onKeyDown和onPaste事件并阻止默认行为，直接禁用键盘输入和粘贴操作，同时不影响日历选择器的点击交互：

<Input 
    type="date" 
    name="date" 
    onChange={this.setStart}
    style={{backgroundColor:"white",marginTop:10,height:50}}
    value={this.state.order.start_date}
    id="exampleDate" 
    placeholder={translate("Start Date")}
    onKeyDown={(e) => e.preventDefault()}
    onPaste={(e) => e.preventDefault()}
/>

方法二：只读属性配合CSS优化 #

添加readOnly属性让输入框无法编辑，再通过CSS确保日历图标依然可点击（部分浏览器默认会隐藏只读日期输入框的图标）：

<Input 
    type="date" 
    name="date" 
    onChange={this.setStart}
    style={{backgroundColor:"white",marginTop:10,height:50}}
    value={this.state.order.start_date}
    id="exampleDate" 
    placeholder={translate("Start Date")}
    readOnly
/>

对应的CSS样式：

/* 强制显示日历图标并允许点击 */
input[type="date"]:read-only::-webkit-calendar-picker-indicator {
    opacity: 1;
    cursor: pointer;
    pointer-events: all;
}
/* 阻止输入框本身的点击事件，只保留日历图标交互 */
input[type="date"]:read-only {
    pointer-events: none;
}

方法三：输入值校验兜底 #

如果前两种方法存在兼容问题，可以在onChange事件中校验日期合法性，无效时恢复为之前的有效值：

setStart = (e) => {
    const inputDate = e.target.value;
    // 校验日期是否有效
    const isValidDate = !isNaN(new Date(inputDate).getTime());
    
    if (isValidDate) {
        this.setState(prevState => ({
            order: { ...prevState.order, start_date: inputDate }
        }));
    } else {
        // 恢复为原有效日期
        e.target.value = this.state.order.start_date;
    }
}

内容的提问来源于stack exchange，提问作者Perry Hoekstra