Flatpickr日期选择器弹窗不显示且flatpickr-months异常渲染问题

问题根因 #

• 输入框类型冲突：你给输入框设置了原生type="date"属性，浏览器自带的原生日期控件会和Flatpickr控件产生事件、渲染层面的冲突，导致点击无法正常触发Flatpickr弹窗。
• 缺少官方样式引入：没有正确引入Flatpickr配套的CSS文件，导致组件自带的弹窗定位、元素隐藏逻辑完全失效，就会出现未配置的flatpickr-months模块错乱渲染、弹窗无法正常显示的问题。
• 初始化时机错误：如果初始化Flatpickr的JS代码在对应DOM元素渲染完成之前执行，会导致初始化失效，点击输入框无响应。
• 重复初始化风险：如果同一类选择器被多次执行Flatpickr初始化逻辑，也会导致组件状态异常，弹窗无法触发。

修复方案 #

1. 修改输入框的type属性，将type="date"改为type="text"，避免和原生日期控件冲突：

<input type="text" class="flatpickr js-flatpickr-date" name="date-planted" placeholder="Select date here"/>

2. 确保在项目中正确引入Flatpickr配套的官方CSS文件，你可以通过npm/yarn等包管理工具安装Flatpickr后导入对应样式，也可以引入官方发布的静态CSS资源文件，样式文件是组件正常渲染、元素定位的必要依赖。
3. 把Flatpickr初始化逻辑包裹在DOM加载完成的回调里，避免初始化时找不到对应元素：

// JQuery 写法
$(document).ready(function() {
  flatpickr('.flatpickr.js-flatpickr-date', {
    enableTime: false,
    dateFormat: "Y-m-d"
  });
})

4. 排查项目代码，确保同一个输入框不会被重复执行flatpickr初始化逻辑，如果需要重新初始化，先调用之前实例的destroy方法销毁原有实例。

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