如何在HTML date输入框中隐藏或禁用年份输入？

嘿，这个问题我之前也踩过坑！原生的<input type="date">是浏览器自带的控件，它的样式和行为都被浏览器牢牢把控着，没法直接做到只显示mm-dd或者强制年份为0000。不过咱们可以通过几个变通方法来实现你的需求，下面给你详细说说：

方法一：用CSS视觉隐藏年份（快速但兼容性有限） #

这种方法是通过样式把年份部分“藏”起来，或者用伪元素覆盖成0000，适合快速实现视觉效果，但不同浏览器的原生控件结构不一样，可能需要微调样式。

1. 隐藏年份部分（只显示mm-dd） #

给输入框套个容器，通过溢出隐藏把年份裁掉：

<div class="date-wrapper">
  <input type="date" id="date" />
</div>

.date-wrapper {
  width: 100px; /* 调整宽度，刚好显示月日部分 */
  overflow: hidden;
}
.date-wrapper input[type="date"] {
  width: 160px; /* 比容器宽，让年份溢出 */
  position: relative;
  left: -30px; /* 调整位置，把年份移出可见区域 */
}

2. 视觉上替换成年份0000 #

如果需要显示0000，咱们可以用伪元素覆盖原生的年份文字：

.date-wrapper {
  position: relative;
  width: 100px;
  overflow: hidden;
}
.date-wrapper input[type="date"] {
  width: 160px;
  position: relative;
  left: -30px;
}
.date-wrapper::after {
  content: '0000';
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: #fff; /* 用背景覆盖原生年份 */
  padding: 0 6px;
  font-size: 14px; /* 和输入框字体保持一致 */
}

⚠️ 注意：这种方法只是视觉上的效果，输入框实际的value还是合法的YYYY-mm-dd格式，如果提交时需要0000，得用JS把值替换成0000-${mm}-${dd}。

方法二：自定义日期控件（跨浏览器更可靠） #

如果追求更好的兼容性和可控性，直接自己做一个月日选择器是最稳妥的方案，完全不受浏览器原生控件的限制：

代码示例 #

<!-- 自定义月日选择器 -->
<div class="custom-date-picker">
  <select id="month-select">
    <option value="01">01月</option>
    <option value="02">02月</option>
    <option value="03">03月</option>
    <option value="04">04月</option>
    <option value="05">05月</option>
    <option value="06">06月</option>
    <option value="07">07月</option>
    <option value="08">08月</option>
    <option value="09">09月</option>
    <option value="10">10月</option>
    <option value="11">11月</option>
    <option value="12">12月</option>
  </select>
  <span>-</span>
  <select id="day-select"></select>
  <!-- 隐藏字段，用于提交0000-mm-dd格式的值 -->
  <input type="hidden" id="submit-date" name="date" />
</div>

// 根据月份动态生成日期选项
function updateDayOptions(selectedMonth) {
  const daySelect = document.getElementById('day-select');
  daySelect.innerHTML = '';
  // 计算当前月份的天数（用2024年是闰年，确保2月有29天）
  const daysCount = new Date(2024, parseInt(selectedMonth), 0).getDate();
  for (let i = 1; i <= daysCount; i++) {
    const option = document.createElement('option');
    const dayStr = i.toString().padStart(2, '0');
    option.value = dayStr;
    option.textContent = `${dayStr}日`;
    daySelect.appendChild(option);
  }
}

// 初始化页面时加载默认月份的日期
updateDayOptions('01');

// 月份变化时更新日期选项
document.getElementById('month-select').addEventListener('change', function() {
  updateDayOptions(this.value);
});

// 提交表单时设置隐藏字段的值为0000-mm-dd
document.querySelector('form').addEventListener('submit', function(e) {
  const month = document.getElementById('month-select').value;
  const day = document.getElementById('day-select').value;
  document.getElementById('submit-date').value = `0000-${month}-${day}`;
});

这种方法完全由你控制样式和逻辑，不管什么浏览器都能保持一致的效果，而且可以直接生成0000-mm-dd格式的提交值，完美符合你的需求。

补充说明 #

你之前写的代码只是限制了输入框可选的年份范围是当前年，但原生date输入框的value必须是合法的ISO日期（年份必须是1-9999之间的有效数字），所以直接设置年份为0000是不被浏览器允许的，这就是为什么你的代码没生效的原因～

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