Цель: при заполнении встреч с помощью форм мы можем видеть, что столбец выбора даты позволяет нам выбирать дату в прошлом, что не имеет никакого смысла (например, запись на прошедшую дату).
Как ограничить это, вот что мы увидим в этой статье. Здесь мы используем форму, созданную в фреймворке 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, чтобы увидеть развертывание нажмите здесь
Подпишитесь, чтобы узнать больше об ответных фрагментах, технических хитростях, небольших историях и лайфхаках 🤗