Блог

Как разрешить пользователю выбирать дату в будущем (максимум текущая дата 3 месяца)?

Я пробовал приведенный ниже код, но он разрешает все будущие даты. Даты не отключаются по истечении 3 месяцев с текущей даты. Я не хочу использовать средство выбора даты или какие-либо пакеты date NPM.

 const [eventDate, setEventDate] = useState(moment())
const eventFutureDate = useState(moment().add(3,'m'))

<Form.Control
  type="date"
  placeholder="select date" name="date"
  value={moment(eventDate).format("YYYY-MM-DD")}
  max={moment(eventFutureDate).format("YYYY-MM-DD")}
  onChange={(e) => setEventDate(e.target.value)}
/>
 

Если вы используете moment.js , что не рекомендуется, вам нужно использовать заглавную M букву внутри метода добавления: moment().add(3,'M') .

Вам следует подумать о замене moment.js однако с помощью date-fns это намного меньше и быстрее.

Другим улучшением было бы сохранить отформатированную дату в том состоянии, event.target.value в onChange котором она уже отформатирована. И вам не нужно использовать состояние для вашего eventFutureDate , если вы его не измените.

Проверьте приведенный ниже код:

 import addMonths from 'date-fns/addMonths';
import format from 'date-fns/format';

...

const [eventDate, setEventDate] = useState(format(new Date(), "yyyy-MM-dd"));
const maxDate = format(addMonths(new Date(), 3), "yyyy-MM-dd");

...

<Form.Control
  type="date"
  max={maxDate}
  name="date"
  onChange={(e) => setEventDate(e.target.value)}
  placeholder="select date"
  value={eventDate}
/>