Laravel + Flatpicker: How to Install using NPM

Question

Did is what I did so far

npm i flatpickr --save
Add @import "~flatpickr/dist/flatpickr.css"; to the app.scss
index.blade.php

@section('content')
<div class="form-group">
<label for="loaned">Loaned</label>
<input type="date" class="form-control" name="loaned" id="loaned">
</div>
@endsection

@section('scripts')
    <script>
        flatpickr('#loaned')
    </script>
@endsection

I get an error, "flatpickr is not defined". I read the documentation but it, I don't know what to do with this part:

// commonjs
const flatpickr = require("flatpickr");

// es modules are recommended, if available, especially for typescript
import flatpickr from "flatpickr";

apokryfos · Accepted Answer · 2020-09-19 07:09:14Z

5

You can add do this in one of two ways:

In your app.js (usually under the resources folder):

import flatpckr from 'flatpickr';
window.flatpckr = flatpckr;

This will expose the flatpckr function in your global window object.

An alternative is to add all your script code in your script files instead of in the blade files e.g.:

import flatpckr from 'flatpickr';

// Maybe add conditions on when to run this
flatpckr('#loaned');

This way you don't "pollute" your window object with a bunch of libraries without needing to.

answered Sep 19, 2020 at 7:09

apokryfos

40.9k11 gold badges85 silver badges128 bronze badges

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

Comments

Dimitri Mostrey · Accepted Answer · 2020-09-19 06:57:36Z

0

In this case I add the following line to webpack.mix.js

mix.copy('node_modules/flatpickr/dist/flatpickr.css', 'public/css/flatpickr.css');

and import the css file the regular way.

<link rel="stylesheet" href="/css/flatpickr.css" />

Addition: of course you need to run npm run dev and if you use versioning, add the file to your git.

answered Sep 19, 2020 at 6:57

Dimitri Mostrey

2,3551 gold badge14 silver badges12 bronze badges

Comments

simaremare · Accepted Answer · 2021-11-10 16:57:41Z

0

This works for me:

npm i flatpickr --save
Register flatpickr in the resources/js/app.js

require('./bootstrap');
require('alpinejs');
require("flatpickr");

Add an import flatpickr in the resources/css/app.css

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

Run the npm run dev or npm run watch.

answered Nov 10, 2021 at 16:57

simaremare

4172 silver badges11 bronze badges

Comments

Mario Ariyanto · Accepted Answer · 2023-06-27 02:08:19Z

0

Alternatively, you can try this package.
https://github.com/Laratipsofficial/laravel-flatpickr

This package is created for easier integration between Laravel and flatpickr.

Quoted from their readme: "Using this package you can add a beautiful date or datetime picker into your project without touching any javascript with the power or laravel component. It is just a laravel component wrapper for the Flatpickr javascript library."

answered Jun 27, 2023 at 2:08

Mario Ariyanto

3461 gold badge4 silver badges14 bronze badges

Comments

LP1 · Accepted Answer · 2023-09-01 07:59:43Z

0

Using a cdn and importing in a Laravel blade file i found works for me. I just imported like this:

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
    <script>
    flatpickr("#reserved_from", {});
    

    </script>

answered Sep 1, 2023 at 7:59

LP1

847 bronze badges

Collectives™ on Stack Overflow

Laravel + Flatpicker: How to Install using NPM

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related