不允许更改时间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，并确保不包括时间选择选项即可。