Laravel中使用flatpickr日期范围选择器报错：self.config.plugins[i]不是函数

我之前也碰到过这个一模一样的错误，折腾了半天终于找到问题所在——核心原因是flatpickr的jQuery包装器没有被正确引入，或者初始化时的插件配置出现了异常。下面是一步步的解决方案：

1. 修正flatpickr的引入方式 #

你当前只引入了flatpickr的核心库，但它的jQuery插件是单独的文件，需要额外引入。修改你的bootstrap.js文件：

// 先引入核心flatpickr库
require('flatpickr');
// 再引入jQuery版本的包装器
require('flatpickr/dist/jquery.flatpickr.js');

const $daterangePicker = $('[data-plugins="daterange-picker"]');
if ($daterangePicker.length > 0) {
  $daterangePicker.flatpickr({
    mode: 'range',
  });
}

2. 显式声明空插件数组（可选但保险） #

错误提示里的plugins[i] is not a function说明flatpickr试图遍历插件数组，但数组里的元素不是可执行的函数。有时候项目中其他代码可能意外修改了全局配置，所以显式设置空插件数组可以避免这个问题：

$daterangePicker.flatpickr({
  mode: 'range',
  plugins: [] // 明确告诉flatpickr没有使用任何插件
});

3. 检查jQuery版本兼容性 #

flatpickr 4.6.3对jQuery版本有要求，确保你项目中的jQuery是3.x及以上版本。可以在package.json里确认：

{
  "dependencies": {
    "jquery": "^3.6.0",
    // 其他依赖...
    "flatpickr": "^4.6.3"
  }
}

4. 重新编译Laravel资源 #

修改完引入代码后，一定要重新编译前端资源，确保修改生效：

# 开发环境
npm run dev

# 生产环境
npm run prod

验证解决方案 #

重新加载页面后，日期范围选择器应该能正常初始化，不会再出现plugins[i] is not a function的错误了。

内容的提问来源于stack exchange，提问作者Panji Setya Nur Prawira