Firefox不支持HTML5 <input type="month">，求最佳JavaScript自定义替代方案

嘿，这个问题我之前帮不少开发者解决过——Firefox确实一直没支持<input type="month">，挺头疼的。下面给你几个经过实践验证的最佳替代方案，从纯原生自定义到轻量库都有，按需选：

如果不想引入第三方库，完全自己实现是最稳妥的思路。核心是用两个下拉框分别选择年份和月份，再把值组合成和原生控件一致的YYYY-MM格式，通过隐藏输入框提交表单。

代码示例 #

HTML结构

<div class="custom-month-picker" style="display: flex; gap: 8px;">
  <select id="year-select">
    <!-- 年份选项将通过JS动态生成 -->
  </select>
  <select id="month-select">
    <option value="01">1月</option>
    <option value="02">2月</option>
    <option value="03">3月</option>
    <option value="04">4月</option>
    <option value="05">5月</option>
    <option value="06">6月</option>
    <option value="07">7月</option>
    <option value="08">8月</option>
    <option value="09">9月</option>
    <option value="10">10月</option>
    <option value="11">11月</option>
    <option value="12">12月</option>
  </select>
</div>
<!-- 用于表单提交的隐藏输入框，格式和原生控件一致 -->
<input type="hidden" id="month-input" name="selected_month">

JavaScript逻辑

const yearSelect = document.getElementById('year-select');
const monthSelect = document.getElementById('month-select');
const hiddenInput = document.getElementById('month-input');

// 生成年份选项（这里设置为最近10年到未来10年，可按需调整）
const currentYear = new Date().getFullYear();
for (let year = currentYear - 10; year <= currentYear + 10; year++) {
  const option = document.createElement('option');
  option.value = year;
  option.textContent = year;
  // 默认选中当前年份
  if (year === currentYear) option.selected = true;
  yearSelect.appendChild(option);
}

// 默认选中当前月份
const currentMonth = String(new Date().getMonth() + 1).padStart(2, '0');
monthSelect.value = currentMonth;

// 监听下拉框变化，更新隐藏输入框的值
function updateMonthValue() {
  const selectedYear = yearSelect.value;
  const selectedMonth = monthSelect.value;
  hiddenInput.value = `${selectedYear}-${selectedMonth}`;
}

yearSelect.addEventListener('change', updateMonthValue);
monthSelect.addEventListener('change', updateMonthValue);

// 初始化值
updateMonthValue();

优点 #

• 完全无依赖，不会增加项目体积
• 样式可完全自定义，适配任何UI设计
• 表单提交逻辑和原生控件完全兼容，后端无需修改

如果不想自己写太多细节逻辑（比如键盘导航、日期范围限制、本地化），轻量库是高效选择。我个人常用的是flatpickr——它支持月份选择模式，体积仅几十KB，兼容性拉满，包括Firefox。

代码示例 #

HTML结构

<input type="text" id="library-month-picker" placeholder="选择年月">

JavaScript逻辑

flatpickr('#library-month-picker', {
  dateFormat: "Y-m", // 输出格式和原生控件一致
  mode: "month", // 启用月份选择模式
  allowInput: true, // 允许手动输入
  locale: {
    firstDayOfWeek: 1,
    months: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"]
  }
});

优点 #

• 开箱即用，无需自己处理复杂交互
• 支持本地化、键盘操作、日期范围限制等高级功能
• 样式美观，可通过CSS微调适配项目UI

如果想要更贴近原生控件的“点击弹出选择器”体验，可以自己实现弹窗逻辑：点击触发按钮后弹出一个包含年月选择的面板，选择完成后关闭弹窗并更新值。这种方案适合需要高度定制交互的场景，但需要额外编写CSS和弹窗控制逻辑。

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