CODEWITHSUNDEEP
jquerywebpackbootstrap-4bootstrap-datepickerwebpack-encore
Mauro
Mauro

Reputation: 189

Bootstrap datepicker with Encore and Symfony4

I think this is a easy one.

I have a Symfony 4 application, with Webpack/Encore.

I have installed bootstrap 4 and everything works fine; I am trying to install bootstrap-datepicker.

So, I have created a file called datepicker.js, here is the content:

// js
require('bootstrap-datepicker');
require('../../../node_modules/bootstrap-datepicker/dist/locales/bootstrap-datepicker.it.min');

// css
require('../../../node_modules/bootstrap-datepicker/dist/css/bootstrap-datepicker.css');

'use strict';

$(document).ready(function() {
    $('.datepicker').datepicker({

    });
});

JQuery and Bootstrap is provided by another file, called vendors.js:

// js
require('jquery');
require('bootstrap');

// scss
require('../scss/vendors.scss');

vendors.js is a shared entry. Here is the portion of my webpack.config.js file:

Encore
    ...

    // shared entries
    .createSharedEntry('vendors', [
        './assets/js/vendors.js'
    ])

    ...

On the page on I want to use datepicker I have the classic error:

jquery.js:3869 Uncaught TypeError: $(...).datepicker is not a function

Why am I wrong?

Upvotes: 4

Views: 2859

Answers (4)

sergiosre
sergiosre

Reputation: 11

You need to install Jquery-ui , its a dependency i will show you an example.

require('webpack-jquery-ui/datepicker');
require("bootstrap-datepicker/js/bootstrap-datepicker.js");
require("bootstrap-datepicker/dist/css/bootstrap-datepicker.css");

    $(document).ready(function () {
      $("#datepicker").each(function () {
        $(this).datepicker({});
      });
    });

it worked for me, hope to help you.

Upvotes: 1

Fabrizio Sabato
Fabrizio Sabato

Reputation: 319

Don't know if you already solved the problem. Assuming your filesystem is organized like that (like in my case):

Root/
  assets/
    css/
      app.scss
    js/
      app.js

Here is what I did:

First of all I have installed the bootstrap datepicker:

npm i bootstrap-datepicker-webpack

This package is the one suggested but in my case it brought some issues, so I did like Edhrendal did:

yarn add [email protected]

I checked the libraries in node_modules folder and I had both bootstrap-datepicker and bootstrap-datepicker-webpack.

At this stage, for styles, I edited app.scss by adding;

@import "~bootstrap-datepicker/dist/css/bootstrap-datepicker3";

and app.js

require("bootstrap-datepicker");
$('.datepicker').datepicker({
  format: 'dd/mm/yyyy'
});

Note: require("bootstrap-datepicker-webpack") didn't work.

Then I ran: 

yarn run encore dev

and it worked.

Upvotes: 1

Edhrendal
Edhrendal

Reputation: 672

I have had the same problem and discovered what may be wrong with bootstrap-datepicker.

In my case, I discovered that the jQuery instance used by the library is the one which is required in its package.json file. So it was never imported in my project jQuery instance therefore I had the TypeError: $(...).datepicker is not a function when trying to create a datepicker.

I found further information in this bootstrap-datepicker issue which points that in the 1.7.0 version, the jQuery dependency was marked as peerDependency. In others versions, it is a dependency and apparently this instance is used for the library instead of the project's one.

I tried to add this version in my project:

yarn add [email protected]

After that, it works like a charm. But I can't get stuck with older version.

Fortunately, I found a topic about avoiding multiple versions of jQuery and the solution is to force the version of a dependency for a specific package:

{
"dependencies": {
    "bootstrap-datepicker": "1.8.0",
    "jquery": "2.2.4",
  },
  "resolutions": {
    "bootstrap-datepicker/jquery": "2.2.4"
  }
}

With this config, bootstrap-datepicker uses the same jQuery instance as the rest of my project and I can create my datepickers as expected.

Upvotes: 5

user6674021
user6674021

Reputation:

It seems in the code sample you gave that you're not including the "datepicker.js" you've created: in your "vendor.js", you should require("./whatever-path/datepicker.js"); as for Bootstrap & jQuery.

Upvotes: 0

Related Questions