Установите минимальное значение для ввода типа Месяц в React

Я работаю над формой, которая имеет ввод типа «Месяц», и применяю проверку этой формы, чтобы убедиться, что все поля действительны и заполнены правильными значениями. Я хочу установить минимальный месяц, который пользователь может ввести в текущий месяц. Например, если пользователь вводит август, он должен вернуть ошибку, а вводить сентябрь или октябрь можно. Вот часть кода, где я получаю текущий месяц и год:

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

И вот мой вклад:

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

Дело в том, что когда я нажимаю на поле ввода, он показывает правильный месяц, начиная с текущего месяца, при этом все прошлые месяцы отключены. Однако, когда я выбираю последний месяц, он все равно показывает ошибку, и поле остается недействительным, что приводит к тому, что форма не отправляется. Почему это могло произойти?

Заранее спасибо.


person Saif    schedule 28.09.2020    source источник


Ответы (1)


Если я не ошибаюсь, вы не передаете обработчик события для ввода, только значение, поэтому изменения не сохраняются.

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

измените значение handleChange на любой нужный вам обработчик, например. setState

person Anastasiia Solop    schedule 28.09.2020