如何在 React.js 中将允许用户的最大日期设置为 select

Question

如何让用户 select 成为未来的一个日期（最大当前日期 + 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)}
/>

Answer 1

如果您使用的是不推荐的 moment.js，则需要在 add 方法中使用大写M ： moment().add(3,'M') 。

不过，您应该考虑用date- fns 替换 moment.js； 它更小更快。

另一个改进是将格式化日期存储在 state 中，因为您的onChange中的event.target.value已经格式化。 如果您不更改eventFutureDate ，则无需使用 state。

检查下面的代码：

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}
/>