如何设置input type="month"控件仅显示月份名称前3个字符

• 不存在可直接修改<input type="month">展示格式的原生属性。该控件的显示文本完全由用户端的浏览器、操作系统区域设置决定，开发者无权修改控件内部渲染的默认文本。
• 不能通过修改控件value实现格式调整：type="month"的value必须遵循YYYY-MM的标准格式，改动格式会直接导致控件识别失效。

注意：不要尝试通过CSS穿透shadow DOM修改控件内部文本，不同浏览器的表单控件shadow DOM结构不统一，且多数浏览器禁止外部样式修改内置表单控件的shadow DOM内容，这类方案没有兼容性保障。

不需要自己重新实现月份选择逻辑，保留原生控件的选择面板体验（包括移动端自动唤起系统级选择器的能力），通过「透明原生控件覆盖自定义展示层」的方式即可实现需求，零额外依赖，兼容性覆盖所有支持type="month"的浏览器。

实现代码 #

HTML结构 #

<div class="month-input-wrapper">
  <!-- 自定义展示层，显示格式化后的缩写月份+年份 -->
  <span class="custom-month-display">请选择月份</span>
  <!-- 原生month控件，透明覆盖在自定义层上方承接交互 -->
  <input type="month" class="native-month-input" />
</div>

CSS样式 #

.month-input-wrapper {
  position: relative;
  width: fit-content;
  /* 以下样式可自行调整，和站点普通输入框样式保持统一即可 */
  border: 1px solid #dcdfe6;
  padding: 6px 12px;
  border-radius: 4px;
  min-width: 80px;
}

.custom-month-display {
  font-size: 14px;
  color: #333;
}

.native-month-input {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 10;
}

JS逻辑 #

// 月份缩写映射表，可根据需要自行调整
const MONTH_ABBR_MAP = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const monthInput = document.querySelector('.native-month-input');
const displayNode = document.querySelector('.custom-month-display');

// 同步更新自定义展示层内容
function syncDisplayText() {
  if (!monthInput.value) {
    displayNode.textContent = '请选择月份';
    return;
  }
  const [year, monthNum] = monthInput.value.split('-');
  displayNode.textContent = `${MONTH_ABBR_MAP[Number(monthNum) - 1]} ${year}`;
}

// 初始存在默认值时先渲染一次
syncDisplayText();
// 监听选择事件，值变化时同步更新展示
monthInput.addEventListener('input', syncDisplayText);

如果需要同时自定义弹出的月份选择面板样式，可以使用轻量日期选择库实现，开启月份选择模式后可自由配置展示格式，但会引入额外包体积，非必要不推荐。

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