HTML5 Проверка даты типа ввода - как ограничить ввод

Question

Эй, ребята, может кто-нибудь мне в этом поможет. Я использую HTML5 input type = date в одной из форм ввода на стороне клиента. Я хочу, чтобы пользователь мог добавлять дату только для месяца. Таким образом, если дата 1 июня, то до 30 июня, а если дата - 10 июня, то только до 30 июня. Есть ли способ добиться этого во внешнем интерфейсе?

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

Я читал о параметрах min и max, но не похоже на жизнеспособное решение для ежемесячной проверки, если только я чего-то не упускаю

Может кто-нибудь помочь?

С уважением, Сандип

Answer 1

Мин. И макс. Можно использовать с датами. См .: Проверка ограничений в MDN.

let today = new Date();
let maxDate = new Date();
maxDate.setUTCDate(1);
maxDate.setUTCMonth(maxDate.getUTCMonth()+1);
maxDate.setUTCDate(0);

document.getElementById('thedate').setAttribute('max', `${maxDate.getUTCFullYear()}-${(maxDate.getUTCMonth()+1).toString().padStart(2,'0')}-${maxDate.getUTCDate()}`);

document.getElementById('thedate').setAttribute('min', `${today.getUTCFullYear()}-${(today.getUTCMonth()+1).toString().padStart(2,'0')}-${today.getUTCDate()}`);
console.log(document.getElementById('thedate'))

document.forms[0].onsubmit = function(e)
{
  e.preventDefault();
  console.log(`the form is ${e.target.reportValidity()?'':'not '}valid`);
  return false;
}

<form>
<input id="thedate" type="date">
<input type="submit">
</form>