Laravel webpack use a simple jquery plugin

Question

With the last version of Laravel, I cannot use a simple jQuery plugin.

‍I try to use ‍‍‍bootstrap-datepicker plugin. So I used:

yarn add bootstrap-datepicker

Then, in my app.js:

import './bootstrap';
import 'bootstrap-datepicker';

In bootstrap.js, I have:

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

This should make jQuery global I guess.

But when I try:

$(function() {
        $('.input-daterange input').each(function() {
            $(this).datepicker('clearDates');
        });
});

I got the error:

app.js:41747 Uncaught TypeError: $(...).datepicker is not a function

I have this error with a lot of plugins (daterangepicker, datepicker...)

What I have to do to use Webpack / Mix to just use one simple jQuery plugin?

refer this justin.ly/adding-jquery-bootstrap-plugins-laravel-5-mix — syam
– syam, Commented Sep 12, 2018 at 18:18
Yes of course, when I use mix.autoload, nothing work anymore :( — Vincent Decaux
– Vincent Decaux, Commented Sep 12, 2018 at 18:30

Fabián Montero Rodríguez · Accepted Answer · 2018-09-12 18:58:06Z

1

I made it this way:

In console:

npm i jquery-ui-dist

/resources/assets/js/bootstrap.js:

try {
    window.$ = window.jQuery = require('jquery');
    require('bootstrap');
    require('jquery-ui-dist/jquery-ui')
} catch (e) {}

/resources/assets/sass/app.scss:

@import'~jquery-ui-dist/jquery-ui';

In your blade or at the end of boostrap.js

$('.input-daterange input').datepicker(params)

In this case I'm usign jQuery UI DatePicker

answered Sep 12, 2018 at 18:58

Fabián Montero Rodríguez

4882 silver badges7 bronze badges

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

Comments

Runbing · Accepted Answer · 2020-04-24 09:58:57Z

0

If jQuery and jQuery Plugin not in the same file, you need to use $.fn.extend() merge the contents of plugin object onto the jQuery prototype to provide new jQuery instance methods.

$.fn.extend({
    datepicker: function() {
        require('bootstrap-datepicker');
    }
});

answered Apr 24, 2020 at 9:58

Runbing

881 silver badge9 bronze badges

Collectives™ on Stack Overflow

Laravel webpack use a simple jquery plugin

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related