不允许更改时间React-DatePicker

Question

I'm using the React-DatePicker package along with momentjs to let the user pick a date on an input which looks like this:

I want to display the time, but not let the user change it directly from the <input> . My date picker has an onChange() function:

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

Does anyone know how I can achieve displaying the time, but not letting the user change it?

Answer 1

I would recommend this way:

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

As you can problably tell, it's set to readonly, so one can't write in the input anymore but they can still copy the text if needed.

Answer 2

As per the examples on this page: https://reactdatepicker.com/

You might try this to prevent the users from selecting times...

<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

Found the answer myself. Just set readOnly on picker and make sure to not include time select option.