正确使用 flatpickr 和 laravel

Question

大家好，我正在尝试让 Flatpickr 使用 Laravel v8。

我做了以下事情：

npm install flatpickr

然后我添加到 resources/app.js：

const flatpickr = require("flatpickr");

flatpickr("#myField", {}); 

在我看来，我有这个定义：

<input id="myField" type="text" name="myField" value="2021-01-16 15:18:02">

但我收到以下错误：

app.js:23902 Uncaught TypeError: flatpickr is not a function
    at Object../resources/js/app.js (app.js:23902)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:23945)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87

我没有想法，如何进行，tbh。

Answer 1

好的，我找到了解决方案：

npm 安装后我必须添加到资源/js/app.js

require('flatpickr')

在我的资源/css/app.css 中我必须添加：

@import('flatpickr/dist/flatpickr.css')

在 npm 运行 dev 之后，我的应用程序中有可用的东西。

为了使用它，我坚持了另一篇帖子@stackoverflow：

Alpine.js +flatpickr Datetimepicker 不工作

然后是我的最终解决方案。

使用 Laravel 8 完成此操作

干杯

Answer 2

我不得不做一些不同的事情。

npm install flatpickr

包含 JS 代码

// resources/js/bootstrap.js
const flatpickr = require('flatpickr');

包括 CSS 代码

//resources/css/app.css
@import 'flatpickr/dist/flatpickr.css';

重建

npm run dev

在我的应用程序的某个地方使用。 (YMMV)

<div wire:ignore>
<input
    wire:model.lazy="birthday"
    x-data
    x-init="flatpickr($refs.input, {dateFormat:'m/d/Y'} );"
    x-ref="input"
    type="text"
    class="max-w-lg block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 sm:max-w-xs sm:text-sm border-gray-300 rounded-md"
    />
</div>


                               

Answer 3

吉姆的回答是正确的； 我的工作;

npm 安装 flatpickr

// 资源/js/bootstrap.js

const flatpickr = require('flatpickr');

//资源/css/app.css

@import 'flatpickr/dist/flatpickr.css';

npm 运行开发

let flatpickrInstance $(document).ready(function() { $("#save_memory").click(function(event) { Swal.fire({ title: '请输入出发日期', html: '', stopKeydownPropagation: false , preConfirm: () => { if (flatpickrInstance.selectedDates[0] { flatpickrInstance = flatpickr( Swal.getPopup().querySelector('#expiry-date') ) } }) }); });