HTML5如何输入年月？方法全解析

你在学习文章相关的知识吗？本文《HTML5输入年月的几种方法》，主要介绍的内容就涉及到，如果你想提升自己的开发能力，就不要错过这篇文章，大家要知道编程理论基础和实战操作都是不可或缺的哦！

HTML5 的 input type="month" 提供原生年月选择功能，格式为“YYYY-MM”，支持设置初始值、JavaScript 动态赋值与创建，需兼容旧浏览器并注意表单提交时后端按字符串解析。

如果您希望在网页中提供年月选择功能，HTML5 提供了原生的 input type="month" 控件，同时也可以通过 JavaScript 动态插入或设置年月值。以下是实现该功能的具体方法：

一、使用 input type="month" 原生控件

HTML5 的 type="month" 输入类型会渲染为一个支持年月选择的控件，浏览器自动提供日期拾取器（仅显示年份和月份），且默认值格式为 "YYYY-MM"。该方式无需额外脚本即可完成基础交互。

1、在 HTML 文件中添加如下代码：
<input type="month" id="yearMonthInput">

2、为控件设置初始值，需确保格式为四位年份加短横线再加两位月份，例如：
<input type="month" id="yearMonthInput" value="2024-05">

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 类型实际不生效，但有助于代码可读性）：
<input type="month" placeholder="请选择年月">

五、表单提交与后端接收注意事项

当包含 type="month" 的表单提交时，该字段的值将以标准字符串形式发送，格式固定为 "YYYY-MM"，服务端应按此格式解析，不可当作完整日期处理。

1、确保 form 的 method 和 enctype 符合常规要求，无需特殊设置：

2、后端接收字段名 report_month 时，预期值为长度为 7 的字符串，例如："2024-09"。

3、若需校验该值是否有效，应检查其是否匹配正则 /^\d{4}-(0[1-9]|1[0-2])$/。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《HTML5如何输入年月？方法全解析》文章吧，也可关注golang学习网公众号了解相关技术文章。