如何将日期输入框固定为2022年12月且仅允许修改日份？

要实现用户只能选择2022年12月内的日期、无法修改年月的需求，可以通过原生日期输入框属性限制+CSS隐藏年月编辑区+JS兜底校验的组合方案完成，具体操作如下：

1. 修正input标签核心属性 #

原生type="date"输入框支持通过min/max锁定可选日期范围，同时用value设置默认日期：

<input id="input_date" type="date" value="2022-12-01" min="2022-12-01" max="2022-12-31">

• value：设置默认选中的日期（示例为2022年12月1日，可按需修改）
• min/max：将可选范围严格限定在2022年12月1日至31日，用户打开日历面板时只能选择该月内的日期

2. 用CSS隐藏年月编辑区域 #

部分浏览器（如Chrome/Edge）允许用户直接在输入框内编辑年月，通过CSS可以隐藏这些区域，强制用户仅能操作日期部分：

/* 隐藏Chrome/Edge的年月编辑字段 */
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-year-field {
  display: none;
}
/* 确保日期编辑区域可正常操作 */
input[type="date"]::-webkit-datetime-edit-day-field {
  pointer-events: auto;
}

Firefox下设置min/max后，用户即便看到年月选项也无法选择其他年月，无需额外CSS处理。

3. JS兜底校验（可选） #

为防止用户通过手动输入绕过限制（比如直接敲入2023-01-01），可添加JavaScript监听日期变化，强制重置回2022年12月：

const dateInput = document.getElementById('input_date');
dateInput.addEventListener('change', function() {
  const selectedDate = new Date(this.value);
  // JS中月份从0开始，12月对应11
  if (selectedDate.getFullYear() !== 2022 || selectedDate.getMonth() !== 11) {
    const day = selectedDate.getDate();
    // 重置为2022年12月的对应日期，确保日数不超过31
    this.value = `2022-12-${Math.min(day, 31).toString().padStart(2, '0')}`;
  }
});

通过以上三步，就能完全实现需求：默认显示2022年12月，用户仅能调整该月内的具体日期，无法修改年月。

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