当date类型input的min与max为同一年时，如何阻止自动插入年份？

问题现象 #

显然，当你为type="date"的input元素设置同一年的min和max属性时，默认状态下用户输入时无法手动填写年份，效果如下：

对应示例代码：

<input type="date" id="start" name="trip-start"
       value
       min="2018-01-01" max="2018-12-31">

我们需要禁用该默认行为，得到可自由编辑年份的常规date输入框，预期效果如下：

解决方案 #

这个是主流浏览器对date输入框的原生默认实现，没有专属的HTML属性可以直接关闭该限制，可通过以下两种常用方案实现需求：

方案1：移除原生min/max，改用JS动态校验 #

完全去掉input上的min、max属性，通过JS监听输入事件做自定义校验，既保留完整的输入能力，也能限制可选范围：

const dateInput = document.getElementById('start');
const minLimit = new Date('2018-01-01');
const maxLimit = new Date('2018-12-31');

// 实时校验输入值
dateInput.addEventListener('input', () => {
  const selected = new Date(dateInput.value);
  if (selected < minLimit || selected > maxLimit) {
    dateInput.setCustomValidity('请选择2018年1月1日至2018年12月31日之间的日期');
  } else {
    dateInput.setCustomValidity('');
  }
});

// 表单提交兜底校验
dateInput.form?.addEventListener('submit', (e) => {
  if (!dateInput.checkValidity()) {
    e.preventDefault();
    alert(dateInput.validationMessage);
  }
});

方案2：扩展min/max年份范围+提交校验 #

如果需要保留原生日期选择器的范围筛选能力，避免用户选到过久的无效日期，可以把min的年份往前调整1年、max的年份往后调整1年，这样年份输入框就会解锁，提交前再做一次范围校验即可：

<input type="date" id="start" name="trip-start"
       min="2017-01-01" max="2019-12-31">

该方案改动最小，适合不需要强实时校验的场景。

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