如何将允许用户的最大日期设置为 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，即 not recommended，则需要在 add 方法中使用大写字母 M：moment().add(3,'M').

您应该考虑将 moment.js 替换为 date-fns；它更小更快。

另一个改进是将格式化日期存储在状态中，因为 onChange 中的 event.target.value 已经格式化。如果你不改变它，你不需要为你的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}
/>

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

How to set max date allowed to the user to select in React.js

html

javascript

datepicker

momentjs

reactjs