HTML日期输入框如何只选月份？年月选择器设置技巧-html教程-PHP中文网

原生支持chrome/edge/opera，safari自ios 16.4/macos 13.3起支持，firefox至今不支持；必须设value为"yyyy-mm"格式，min/max同理；检测需用document.createelement('input').type === 'month'；降级可用双select或flatpickr；valueasnumber/valueasdate无效，须手动解析；提交值恒为"yyyy-mm"字符串，后端需按此格式解析。

html日期输入框如何只选月份？年月选择器设置技巧

HTML `<input type="month">` 的基础用法和兼容性现实

直接用 <input type="month"> 就能实现年月选择，但别指望它在所有浏览器里都长一样——Chrome、Edge、Opera 原生支持，会显示年份+下拉月份；Safari 从 iOS 16.4 / macOS Ventura 13.3 才开始支持，旧版本直接退化为普通文本框；Firefox 目前（v128）仍不支持，显示为空白或文本输入。

所以如果你的用户群包含大量 Firefox 或老 Safari 用户，不能只靠原生控件兜底。

必须加 value 属性初始化，格式严格为 "YYYY-MM"（如 "2024-07"），否则 Chrome 可能显示空或当前月，且提交时值为空
不要写 min="2023" 这种错误写法——min 和 max 也必须是 "YYYY-MM" 格式，比如 min="2023-01"
移动端触发的是系统级年月选择器（iOS 的滚轮、Android 的日历缩略版），体验比自研好，但样式完全不可定制

如何让 Firefox 和老 Safari 也能用上月选择器？

检测是否支持 type="month"，再决定是否加载降级方案。别用 document.createElement('input').type = 'month' 这种赋值后判断的方式——它在不支持的浏览器里不会报错，但也不会生效。

正确检测方式是：

const input = document.createElement('input');
input.type = 'month';
if (input.type !== 'month') {
  // 加载 polyfill 或切换为 select + 年份/月份下拉组合
}

常见降级策略：

用两个 <select></select>：一个选年份（动态生成范围），一个选月份（固定 1–12 或中文“一月”～“十二月”）
用第三方轻量库如 flatpickr（配 mode: 'month'）或 vanillajs-datepicker，它们对 type="month" 不支持的环境自动 fallback
避免用 jQuery 插件——多数已停止维护，且引入 jQuery 本身就不划算

`valueAsNumber` 和 `valueAsDate` 在 month 输入框里根本不能用

这是最容易踩的坑：valueAsNumber 对 type="month" 返回 NaN，valueAsDate 返回 null。因为月份不是完整日期，没有明确的时间戳锚点（比如是当月 1 日？15 日？最后一天？）

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

必须手动解析 value 字符串：

const input = document.querySelector('input[type="month"]');
// 用户选了 "2024-07" → 解析成 Date 对象（默认取当月第一天）
const [year, month] = input.value.split('-').map(Number);
const date = new Date(year, month - 1); // 注意 month 是 0-indexed

注意点：