Set a minimum value to input of type Month in React

Question

I am working on a form that has an input of type "Month" and I am applying a validation on this form to make sure that all fields are valid and filled with correct values. I want to set a minimum month that a user can input to the current month. For example, if a user enters "August", it must return an error while entering September or October are ok. Here is the part of code where I get my current month and year :

// Get the current date in the correct form to set a minimum expiry date 
const today = new Date();
const currentDate = today.getFullYear() + '-' + ('0' + (today.getMonth() + 1)).slice(-2)

And here is my input :

 <input required className="form-control input" autoComplete="false" name="expiry_date" type="month"
  value={form.expiry_date} placeholder="Expiration Date (MM / YY)" min={currentDate}/>

The thing is, when I click on the input field, it shows the correct month starting from the current month with all past months disabled. However, when I choose a latter month, it still shows an error and the field remains invalid which results in not submitting the form. Why could this happen?

Thanks in advance.

Answer 1

If I am not mistaken, you don't pass an event handler for the input, only value, so the changes are not saved.

<input required className="form-control input" autoComplete="false" name="expiry_date" type="month"
  value={form.expiry_date} onChange={handleChange} placeholder="Expiration Date (MM / YY)" min={currentDate}/>

change the handleChange value to whatever handler you need, e.g. setState