不允许时间更改React-DatePicker

Question

我使用React-DatePicker包和momentjs让用户在如下所示的输入上选择日期：

​

​

我想要显示时间，但不让用户直接从<input>更改它。我的日期选择器有一个onChange()函数：

onExpirationDateChange(date) {
   this.setState({selectedTime: date.unix()});
}

有人知道如何实现显示时间，但不让用户更改时间吗？

Answer 1

我推荐这样做：

document.getElementsByTagName("inputdate")[0].setAttribute("readonly", "readonly"); 

如你所知，它被设置为只读，所以人们不能再在输入中写入，但如果需要的话，他们仍然可以复制文本。

Answer 2

根据本页上的示例：https://reactdatepicker.com/

您可以尝试这样做，以防止用户选择时间...

<DatePicker
  selected={this.state.startDate}
  onChange={this.handleChange}
  showTimeSelect
  excludeTimes={[moment().hours(17).minutes(0), moment().hours(18).minutes(30), moment().hours(19).minutes(30)], moment().hours(17).minutes(30)}
  dateFormat="LLL"
/>

Answer 3

我自己找到了答案。只需在选取器上设置readOnly，并确保不包含时间选择选项。