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.

One workaround is for me, currently: stackoverflow.com/questions/64597995/… with cdn import. But with the npm install import I am still strugeling — Krie9er
– Krie9er, Commented Jan 17, 2021 at 12:37

Krie9er · Accepted Answer · 2021-01-17 13:00:16Z

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

answered Jan 17, 2021 at 13:00

Krie9er

391 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Jim · Accepted Answer · 2021-12-08 14:25:07Z

1

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>

answered Dec 8, 2021 at 14:25

Jim

4142 silver badges15 bronze badges

Comments

Emin Doğu · Accepted Answer · 2022-04-25 07:42:32Z

-1

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

answered Apr 25, 2022 at 7:42

Emin Doğu

12 bronze badges

1 Comment

Liki Crus Over a year ago

duplicated answer in this thread. No need to post

Collectives™ on Stack Overflow

proper usage of flatpickr and laravel

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related