不允許更改時間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 ，並確保不包括時間選擇選項即可。