Don't allow time change 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?

Are you trying to set a specific time everytime, like no matter which date they pick, it will always show that date with the time set as 11:59am? — Steven McConnon, Oct 23 '18 at 23:25

score 0 · Answer 1 · answered Oct 23 '18 at 23:24

0

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.

answered Oct 23 '18 at 23:24

Sneakybastardd

288
1
5
17

score 0 · Answer 2 · answered Oct 23 '18 at 23:26

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"
/>

score 0 · Answer 3 · answered Oct 23 '18 at 23:31

0

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

answered Oct 23 '18 at 23:31

MarksCode

8,074
15
64
133

Don't allow time change React-DatePicker

3 Answers3