HTML date类型输入框max最大日期属性设置不生效问题

问题原因 #

max属性不生效是两个错误共同导致的：

• 日期计算方法误用：setDate()是用来设置当月日期（取值范围1~31）的方法，你传入月份偏移量getMonth()+3属于方法用错，得到的日期本身就是错误值。如果要加3个月应该使用setMonth()方法，你之前尝试的getDate()+90计算90天后日期的思路本身是正确的，只是需要配合后续的格式处理才能生效。
• 属性值格式不符合要求：type="date"的输入框要求min、max属性必须是YYYY-MM-DD格式的字符串，你当前直接把未处理的Date对象赋值给了max，浏览器无法识别该格式，所以限制规则不生效。

修正后的代码 #

JS部分 #

let today = new Date().toISOString().split('T')[0];
// 计算3个月后的日期
let date3m = new Date();
date3m.setMonth(date3m.getMonth() + 3);
// 转换为input date要求的YYYY-MM-DD格式
let date3mFormat = date3m.toISOString().split('T')[0];
const startInput = document.getElementsByName("start")[0];
startInput.setAttribute('min', today);
startInput.setAttribute('max', date3mFormat);

如果需要计算90天后的最大日期，只需要把日期计算逻辑替换即可：

let date3m = new Date();
date3m.setDate(date3m.getDate() + 90);

补充说明 #

toISOString()输出的是UTC标准时间，如果你需要适配本地时区、避免时区差导致的日期偏移问题，可以用下面的格式化方法处理日期：

function formatLocalDate(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}`;
}
// 使用示例
let today = formatLocalDate(new Date());
let date3m = new Date();
date3m.setMonth(date3m.getMonth() + 3);
let date3mFormat = formatLocalDate(date3m);

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