HTML5 的 input type="month" 提供原生年月选择功能，格式为“YYYY-MM”，支持设置初始值、JavaScript 动态赋值与创建，需兼容旧浏览器并注意表单提交时后端按字符串解析。
如果您希望在网页中提供年月选择功能，HTML5 提供了原生的 input type="month" 控件，同时也可以通过 JavaScript 动态插入或设置年月值。以下是实现该功能的具体方法：
一、使用 input type="month" 原生控件
HTML5 的 type="month" 输入类型会渲染为一个支持年月选择的控件，浏览器自动提供日期拾取器（仅显示年份和月份），且默认值格式为 "YYYY-MM"。该方式无需额外脚本即可完成基础交互。
1、在 HTML 文件中添加如下代码：
2、为控件设置初始值，需确保格式为四位年份加短横线再加两位月份，例如：
立即学习“前端免费学习笔记（深入）”；
3、通过 JavaScript 获取用户选择的年月字符串（格式恒为 "YYYY-MM"）：
const monthInput = document.getElementById('yearMonthInput');
console.log(monthInput.value);
二、用 JavaScript 设置 input type="month" 的值
JavaScript 可以动态写入符合规范的年月字符串到 type="month" 输入框中，但必须严格遵循 "YYYY-MM" 格式，否则值将被清空或无效。
1、获取目标 input 元素：
const el = document.getElementById('yearMonthInput');
2、构造合法年月字符串，例如当前年月：
const now = new Date();
const year = now.getFullYear();
const month = String(now.getMonth() + 1).padStart(2, '0');
const formatted = `${year}-${month}`;
3、赋值给 input 元素：
el.value = formatted;
三、用 JavaScript 动态创建并插入 month 输入框
若需在页面加载后或响应事件时新增年月选择器，可通过 DOM 操作创建 input 元素并设置其 type 和属性，再插入到指定容器中。
1、创建新 input 元素：
const newInput = document.createElement('input');
2、设置 type 为 month，并添加 id 和初始 value：
newInput.type = 'month';
newInput.id = 'dynamicMonth';
newInput.value = '2025-12';
3、将新元素追加至某个父容器（如 id 为 "container" 的 div）：
document.getElementById('container').appendChild(newInput);
四、兼容性处理与 fallback 方案
部分旧版浏览器（如 IE、Firefox 早期版本）不支持 type="month"，此时会退化为普通文本输入框。可通过检测支持性并提供替代方案提升可用性。
1、检测浏览器是否支持 month 类型：
const input = document.createElement('input');
input.type = 'month';
const isSupported = input.type === 'month';
2、若不支持，可替换为两个独立下拉菜单（年份 + 月份）或引入轻量级日期库生成年月选择界面。
3、在 input 上添加 placeholder 属性作为视觉提示（尽管对 month 类型实际不生效，但有助于代码可读性）：
五、表单提交与后端接收注意事项
当包含 type="month" 的表单提交时，该字段的值将以标准字符串形式发送，格式固定为 "YYYY-MM"，服务端应按此格式解析，不可当作完整日期处理。
1、确保 form 的 method 和 enctype 符合常规要求，无需特殊设置：
2、后端接收字段名 report_month 时，预期值为长度为 7 的字符串，例如："2024-09"。
3、若需校验该值是否有效，应检查其是否匹配正则 /^\d{4}-(0[1-9]|1[0-2])$/。
