如何设置允许用户在 React.js 中选择的最大日期

【问题标题】：How to set max date allowed to the user to select in React.js如何设置允许用户在 React.js 中选择的最大日期
【发布时间】：2021-04-19 14:30:55
【问题描述】：

如何让用户选择未来的日期（最大当前日期+3个月）？

我尝试了下面的代码，但它允许所有未来的日期。从当前日期起 3 个月后，日期不会被禁用。我不想使用日期选择器或任何日期 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)}
/>

【问题讨论】：

标签： javascript html reactjs datepicker momentjs

【解决方案1】：

如果您使用 moment.js，即not recommended，则需要在 add 方法中使用大写的 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}
/>

【讨论】：

如何实现3年？