Цель: при заполнении встреч с помощью форм мы можем видеть, что столбец выбора даты позволяет нам выбирать дату в прошлом, что не имеет никакого смысла (например, запись на прошедшую дату).

Как ограничить это, вот что мы увидим в этой статье. Здесь мы используем форму, созданную в фреймворке React, но функциональность, лежащая в основе этого, в значительной степени представляет собой ванильный Js и базовый HTML-материал.

HTML позволяет использовать свойство min ,max для ввода даты типа. Ожидается, что значение будет указано в этом формате (ГГГГ-мм-дд ), например: 2022–09–14. Благодаря этому мы можем статически назначить максимальную/минимальную пороговую дату.

‹тип ввода=”дата” id=”дата” макс=”2022-09-14”/›

Для динамического распределения мы используем модуль Date JS, чтобы получить текущую дату и вывести строку в формате, как указано выше. Затем с помощью setAttribute мы можем установить текущее значение даты на минимум

Js:

const setToday = (event) => {
let today = new Date();
let month = today.getMonth() + 1;
if (month < 10) { month = ‘0’ + month; }
let todayString = today.getFullYear() + ‘-’ + month + ‘-’ +      
                   today.getDate(); 
console.log(‘today’ + todayString); document.getElementById(‘date’).setAttribute(‘min’, todayString); };
  • добавление 1, так как в модуле даты месяц начинается с 0, также ожидается, что месяц будет иметь 2 цифры по html, поэтому добавление 0, если первые девять месяцев.
  • создание сегодняшней строки в формате «ГГГГ-мм-дд».
  • используя setAttribute, мы устанавливаем минимальную дату сегодня.

HTML

<input type=”date” id=”date” onClick={ (e) => {setToday(e); } } />

Выход:

посетите эту ссылку stackblitz, чтобы увидеть развертывание нажмите здесь

Подпишитесь, чтобы узнать больше об ответных фрагментах, технических хитростях, небольших историях и лайфхаках 🤗