如何为HTML date输入框预选择年份但不预设值以保持必填校验有效性？

方案1：仅定位日期选择器弹窗年份，不预先填充输入值（最推荐） #

该方案完全不触碰输入框的最终空值状态，原生必填校验规则不会受到任何影响：

• 给输入框绑定focus事件，触发时临时给输入框赋值为16年前的日期，随后立即清空值。主流浏览器的date类型选择器弹窗打开时会自动定位到赋值对应的日期，就算值被马上清空，弹窗的定位也不会回退，输入框本身仍保持空值，:invalid样式完全正常生效。
  代码示例：

const birthdateInput = document.getElementById('birthdate');
birthdateInput.addEventListener('focus', () => {
  // 计算16年前的日期
  const defaultDate = new Date();
  defaultDate.setFullYear(defaultDate.getFullYear() - 16);
  const dateStr = defaultDate.toISOString().split('T')[0];
  // 临时赋值触发弹窗定位后马上清空
  birthdateInput.value = dateStr;
  birthdateInput.value = '';
}, { once: true }); // 仅首次触发，避免用户后续选择日期时被重置

方案2：保留预设value，新增自定义校验规则 #

如果业务需要默认显示日期给用户参考，可以通过HTML5自定义校验API区分默认值和用户实际选择的值，保证默认值不通过必填校验：

• 初始化时给输入框设置16年前的默认值，同时加自定义标记区分默认状态
• 用户修改值后清除标记，同步更新校验状态
  代码示例：

<!-- 输入框结构 -->
<input type="date" name="birthday" id="birthdate" required data-is-default="true">

const birthdateInput = document.getElementById('birthdate');
// 初始化默认值
const defaultDate = new Date();
defaultDate.setFullYear(defaultDate.getFullYear() - 16);
birthdateInput.value = defaultDate.toISOString().split('T')[0];

// 监听用户修改操作
birthdateInput.addEventListener('change', () => {
  birthdateInput.dataset.isDefault = 'false';
  birthdateInput.setCustomValidity('');
});

// 实时校验状态
birthdateInput.addEventListener('input', () => {
  if (birthdateInput.dataset.isDefault === 'true') {
    birthdateInput.setCustomValidity('请选择您的出生日期');
  } else {
    birthdateInput.setCustomValidity('');
  }
});

该方案下默认值仍会触发:invalid样式，只有用户实际修改过值之后才会转为合法状态。

轻量兼容方案（适用年龄限制场景） #

如果业务本身要求用户年龄必须大于16岁，可以直接给输入框设置max属性，值为16年前的最后一天，比如max="2008-12-31"，日期选择器打开时会自动定位到允许选择的最大年份对应的日期，无需额外JS逻辑，原生校验规则完全生效。

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