Hello all I am trying to get Flatpickr working with Laravel v8.
I've done the following:
npm install flatpickr
then I added to the resources/app.js:
const flatpickr = require("flatpickr");
flatpickr("#myField", {});
in my view I have this defined:
<input id="myField" type="text" name="myField" value="2021-01-16 15:18:02">
But I get the following errors:
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
I have no Ideas, how to proceed, tbh.
Ok I found the solution:
after npm install I had to add to the resources/js/app.js
require('flatpickr')
and in my resources/css/app.css I had to add:
@import('flatpickr/dist/flatpickr.css')
after npm run dev I had the stuff available in my application.
To use it then I sticked to another post @stackoverflow:
Alpine.js +flatpickr Datetimepicker is not working
was then my final solution.
Done this with Laravel 8
Cheers
I had to do something different.
npm install flatpickr
Include JS Code
// resources/js/bootstrap.js
const flatpickr = require('flatpickr');
Include CSS Code
//resources/css/app.css
@import 'flatpickr/dist/flatpickr.css';
Rebuild
npm run dev
Use somewhere in my app. (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>
Jim's answer is correct; my job;
npm install flatpickr
// resources/js/bootstrap.js
const flatpickr = require('flatpickr');
//resources/css/app.css
@import 'flatpickr/dist/flatpickr.css';
npm run dev
let flatpickrInstance $(document).ready(function() { $("#save_memory").click(function(event) { Swal.fire({ title: 'Please enter departure date', html: '', stopKeydownPropagation: false, preConfirm: () => { if (flatpickrInstance.selectedDates[0] { flatpickrInstance = flatpickr( Swal.getPopup().querySelector('#expiry-date') ) } }) }); });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.