如何解决$('.selector').flatpickr is not a function报错问题

报错原因 #

该报错核心原因为通过ES模块导入flatpickr时，默认不会自动挂载到jQuery原型对象上，因此jQuery选择器返回的实例不存在flatpickr方法，触发类型错误。

可行解决方法 #

方案1：手动挂载flatpickr到jQuery原型，保留jQuery风格调用 #

修改JS代码如下：

import $ from 'jquery';
import flatpickr from 'flatpickr';

// 手动挂载flatpickr到jQuery原型
$.fn.flatpickr = function (config) {
  return this.each((index, element) => {
    flatpickr(element, config);
  });
};

// 确保DOM加载完成后再执行初始化逻辑
$(function() {
  const $datePlanted = $('.plot-tree-form__date-planted-text');
  $datePlanted.flatpickr({
    enableTime: false,
    dateFormat: 'Y-m-d'
  });
});

如果是通过<script>标签依次引入jQuery和flatpickr的UMD格式文件，flatpickr会自动完成挂载，无需手动写上述挂载代码。

方案2：使用flatpickr原生调用方式，无需依赖jQuery挂载 #

直接传入选择器或DOM元素初始化，代码更简洁：

import flatpickr from 'flatpickr';

document.addEventListener('DOMContentLoaded', function() {
  flatpickr('.plot-tree-form__date-planted-text', {
    enableTime: false,
    dateFormat: 'Y-m-d'
  });
});

额外排查点 #

• 确认代码执行时机在DOM渲染完成之后，避免选择器无法匹配到对应input元素触发异常
• 确认项目依赖中没有多个版本jQuery共存，避免挂载的原型与实际使用的jQuery不是同一实例

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