如何解决 $('.selector').flatpickr 不是函数？答案

【问题标题】：How to resolve $('.selector').flatpickr is not a function?如何解决 $('.selector').flatpickr 不是函数？
【发布时间】：2021-08-24 10:34:19
【问题描述】：

我在我的项目中使用 jquery 3.6 和 flatpickr 4.6.9，但是当我尝试使用我的 jquery 选择器进行实例化时，它给了我错误提示 Uncaught TypeError: $datePlanted.flatpickr is not a function。下面是jquery和html代码：

jQuery

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

const $datePlanted = $('.plot-tree-form__date-planted-text')
$datePlanted.flatpickr({
      enableTime: false,
      dateFormat: 'Y-m-d'
    });

HTML

<div class="plot-tree-form__form-group plot-tree-form__date-planted">
 <label for="date-planted">
    Date Planted Here
    <input type="text" class="plot-tree-form__date-planted-text" name="date-planted" placeholder="Date here"/>
 </label>
</div>

根据 flatpickr 文档，这应该可以工作。我该如何解决这个问题？我已经坚持了很长时间。任何帮助将不胜感激。

文档 - https://flatpickr.js.org/getting-started/

这就是我在我的 javascript 文件中导入 jquery 和 flatpickr 的方式

【问题讨论】：

1) 你确定有<script src=..flatpickr...> 吗？ 2) 绝对是在你的脚本 src=jquery 之后吗？和 3) 你肯定不在你的flatpickr 脚本src 之后有另一个jquery 脚本标签吗？当使用诸如 wordpress/asp.net-mvc 之类的框架时，最后一个经常发生，该框架将自己的 jquery 填充到主体的底部。
代码中最重要的部分是包含 jquery 和 flatpickr 库的部分。您没有在问题中包含该部分，但几乎可以肯定这就是错误所在。
您的代码可以正常工作。 jsfiddle.net/6wars20y 所以很可能是脚本标签的问题。
我正在使用 npm 下载 flatpickr，因此我在导入 jquery 后导入了我的 javascript 文件，我现在在问题中附上了屏幕截图
@ChrisLear 我已经编辑了问题并添加了我如何导入 jquery 和 flatpickr 的代码以及截图

标签： javascript jquery flatpickr

【解决方案1】：

我遇到了同样的问题，我的解决方案是：在引用 JQuery，然后引用 BOTHcss AND flatpickr 的 js 文件（一个接一个）：

      <script src="path/to/JQuery"></script>
      <link rel="stylesheet" href="path/to/flatpickr.css"> 
      <script src="path/to/flatpickr.js"></script>

那么就：

<input class="calendar" type="text" placeholder="Select Date..">

<script>
    $(".calendar").flatpickr();
</script>

【讨论】：