如何为React表单type="date"日期输入框设置最大最小可选值

原生type="date"类型的输入框原生支持min、max属性来限制可选日期范围，你只需要给输入框组件传入这两个属性即可，注意属性值必须严格使用YYYY-MM-DD格式的字符串，传入其他格式（比如Date对象、斜杠分隔的日期字符串）都会导致限制失效。

具体修改方式 #

直接在你现有代码的input标签上新增min和max属性即可：

• 固定日期范围场景：直接写死符合格式的日期字符串
• 动态日期范围场景（比如限制最早选今天、最晚选N天后）：先通过JS计算出对应日期，转成YYYY-MM-DD格式字符串后再传入

固定范围示例 #

比如限制可选日期在2024年全年，修改后的代码如下：

<label htmlFor="invoiceDate">Invoice Date</label>
<input
  type="date"
  name="invoiceDate"
  id="invoiceDate"
  placeholder="Invoice Date"
  autoComplete="off"
  min="2024-01-01" // 最小可选日期：2024年1月1日
  max="2024-12-31" // 最大可选日期：2024年12月31日
  value={invoicedate}
  onChange={(e) => setInvoicedate(e.target.value)}
/>

动态范围示例 #

如果需要动态生成日期（比如禁止选择今天之前的日期），可以先写个工具方法生成符合格式的日期字符串：

// 生成YYYY-MM-DD格式的日期字符串
const formatDate = (date) => {
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

// 比如设置最小可选日期为今天
const today = formatDate(new Date());
// 设置最大可选日期为30天后
const maxDate = formatDate(new Date(Date.now() + 30 * 24 * 60 * 60 * 1000));

// 传入组件即可
// <input ... min={today} max={maxDate} ... />

补充提示：原生的min/max限制只会在日期选择面板中把超出范围的日期置灰，无法完全阻止用户通过手动输入、修改元素属性等方式传入超出范围的值，正式提交表单前建议再加一层JS校验做兜底。

内容的提问来源于stack exchange，提问作者AbhayChandel