Flatpickr monthYear插件上下箭头点击后日历视图不更新问题

问题现象 #

使用Flatpickr的monthYear模式并配置了minDate和maxDate后：

• 点击日历侧边的左右箭头切换年份，年份与日历视图能正常同步更新
• 点击年份输入框的上下箭头调整年份，年份数值变更，但日历视图停留在原年份，未同步更新

问题原因 #

Flatpickr默认对输入框上下箭头的年份修改操作，没有触发日历视图的重新渲染逻辑，尤其在设置了日期范围限制时，视图不会自动跟随年份变更刷新。

解决方案 #

在Flatpickr配置中添加onChange事件监听，当日期（年份）发生变更时，手动调用实例的redraw()方法触发日历视图重绘，确保视图与当前选中年份同步。

修改后的示例代码：

flatpickr("#monthPicker", {
  mode: "single",
  dateFormat: "Y-m",
  minDate: "2020-01",
  maxDate: "2025-12",
  plugins: [new monthYearPlugin({
    shorthand: true,
    dateFormat: "Y-m",
    altFormat: "F Y"
  })],
  onChange: (selectedDates, dateStr, instance) => {
    // 手动触发日历视图重绘
    instance.redraw();
  }
});

效果验证 #

修改后点击年份输入框的上下箭头调整年份，日历视图会同步更新到对应年份，与侧边箭头的操作行为保持一致。

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