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.

For type="date" or any of the HTML5 date-related controls, dates must be formatted in yyyy-mm-dd format. — Heretic Monkey
– Heretic Monkey, Commented Oct 14, 2022 at 17:33

Curious_guy · Accepted Answer · 2022-08-24 16:42:16Z

3

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

answered Aug 24, 2022 at 16:42

Curious_guy

16114 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1