proper usage of flatpickr and laravel

Question

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.

Answer 1

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

Answer 2

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>


                               

Answer 3

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') ) } }) }); });