如何在 laravel mix 上正确导入 flatpickr
How to properly import flatpickr on laravel mix
我想在 laravel 上使用 flatpickr 库中的 daterange 选择器,但是当我尝试启动它时,如果 self.config.plugins[i] is not a function
出现错误。我已按照说明操作,但仍未找到解决方案。
这里是我要重现的代码:
package.json 文件:
{
.....
.....
"dependencies": {
.....
.....
"flatpickr": "^4.6.3",
.....
.....
}
}
bootstrap.js
require('flatpickr');
const $daterangePicker = $('[data-plugins="daterange-picker"]');
if ($daterangePicker.length > 0) {
$daterangePicker.flatpickr({
mode: 'range',
});
}
Blade 视图:
<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)
这是您的 data-plugins
属性。将它的名称更改为几乎任何其他名称,它会正常工作。
在你的bootstrap中:
const $daterangePicker = $('[data-type="daterange-picker"]');
if ($daterangePicker.length > 0) {
$daterangePicker.flatpickr({
mode: 'range',
});
}
在您的 blade 模板中:
<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 -->
我想在 laravel 上使用 flatpickr 库中的 daterange 选择器,但是当我尝试启动它时,如果 self.config.plugins[i] is not a function
出现错误。我已按照说明操作,但仍未找到解决方案。
这里是我要重现的代码:
package.json 文件:
{
.....
.....
"dependencies": {
.....
.....
"flatpickr": "^4.6.3",
.....
.....
}
}
bootstrap.js
require('flatpickr');
const $daterangePicker = $('[data-plugins="daterange-picker"]');
if ($daterangePicker.length > 0) {
$daterangePicker.flatpickr({
mode: 'range',
});
}
Blade 视图:
<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)
这是您的 data-plugins
属性。将它的名称更改为几乎任何其他名称,它会正常工作。
在你的bootstrap中:
const $daterangePicker = $('[data-type="daterange-picker"]');
if ($daterangePicker.length > 0) {
$daterangePicker.flatpickr({
mode: 'range',
});
}
在您的 blade 模板中:
<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 -->