如何在 laravel mix 上正确导入 flatpickr

Question

我想在 laravel 上使用 flatpickr 库中的日期范围选择器，但是当我尝试启动它时，如果self.config.plugins[i] is not a function ，则会出现错误。 我已按照说明进行操作，但仍未找到解决方案。

这是我要重现的代码：

package.json 文件：

{
    .....
    .....
    "dependencies": {
        .....
        .....
        "flatpickr": "^4.6.3",
        .....
        .....
    }
}

引导程序.js

require('flatpickr');

const $daterangePicker = $('[data-plugins="daterange-picker"]');

if ($daterangePicker.length > 0) {
  $daterangePicker.flatpickr({
    mode: 'range',
  });
}

刀片视图：

<div class="form-group mr-2">
 <input type="text" class="form-control form-control-sm"
        data-plugins="daterange-picker" placeholder="2018-10-03 to 2018-10-10">
</div> <!-- end form-group mr-2 -->

控制台日志错误：

TypeError: self.config.plugins[i] is not a function
    at parseConfig (flatpickr.js:1977)
    at init (flatpickr.js:588)
    at FlatpickrInstance (flatpickr.js:2522)
    at _flatpickr (flatpickr.js:2541)
    at jQuery.fn.init.jQuery.fn.flatpickr (flatpickr.js:2592)
    at HTMLDocument.<anonymous> (kuhaku.js:22)
    at mightThrow (jquery.js:3762)
    at process (jquery.js:3830)

Answer 1

这是您的data-plugins属性。 将它的名称更改为几乎任何其他名称，它会正常工作。

在您的引导程序中：

const $daterangePicker = $('[data-type="daterange-picker"]');

    if ($daterangePicker.length > 0) {
        $daterangePicker.flatpickr({
            mode: 'range',
        });
    }

在您的刀片模板中：

<div class="form-group mr-2">
            <input type="text" class="form-control form-control-sm"
                   data-type="daterange-picker" placeholder="2018-10-03 to 2018-10-10">
        </div> <!-- end form-group mr-2 -->