How to resolve min and max date input in React Js?

Question

I've created a function that return a substraction or an addition from current Date, and set the result in the min or max of date input:

My function:

  SubDate = (subDay) => {
    let tgDate = new Date();
    tgDate.setDate(tgDate.getDate() + subDay)
    return tgDate.toLocaleDateString();
  }

My input:

<input type="date" id="dateInput" min={this.SubDate(-7)} max={this.SubDate(7)} />

The function is working. In the navigator's inspector, I see the min and max of the input like so:

<input type="date" id="dateInput" min="13/09/2020" max="27/09/2020">

But when I try to select a date, It does'nt prevent me to choose the min date and the max date.

Can I resolve that? Or using DateTimePicker instead of that.

Thank you.

Answer 1

I am not sure if you ended up resolving this or not but for reference,

var today = new Date().toISOString().split('T')[0];
<input type="date"  onChange={this.handleChange} max={today} />