How to "install" Bootstrap Datetimepicker on Symfony?

Question

I have files like assets/css/bootstrap-4.3.1.css and assets/js/bootstrap-4.3.1.js and in webpack.config I have

.addEntry('js/bootstrap','./assets/js/bootstrap-4.3.1.js')

and

.addStyleEntry('css/bootstrap', './assets/css/bootstrap-4.3.1.css')

I need bootstrap-3.3.1.js and bootstrap-3.3.1.css, respectively.

I need to install these in yarn in order to ensure that I have my perequisites for Bootstrap datetimepicker. Tried with

yarn add [email protected]

without any luck. Then I tried to download the files manually into assets/css and assets/js, respectively and ran the command above again, without any luck. So, I need to use yarn to change the version of Bootstrap. Then, I will need to use Bootstrap datetimepicker as well. How can I achieve my goal? Linking the css and js files manually at this point seems to be extremely for me in comparison to using yarn, but it is highly probable that the cause is just my lack of knowledge about yarn.

EDIT

At this point I have

package.json

//...
"depencencies": {
    //...
    "bootstrap": "^3.3.1",
    //...
}
//...

app.js

//...
require("bootstrap");
//...

Error message when running yarn install:

This dependency was not found:

bootstrap in ./assets/js/app.js

To install it, you can run: npm install --save bootstrap

@msg what would the effect be in that case? I suppose your suggestion is to add this line and then run yarn install. Is that correct? — Lajos Arpad
– Lajos Arpad, Commented Aug 7, 2019 at 0:27
@msg thanks for your comments so far, however, not knowing much of these things, they are still unclear for me. I would like to have bootstrap-3.3.1. By creating a line saying require('bootstrap') how will it know the version of my preference? app.js already has a line, saying import "bootstrap";. Knowing these where should I put require('bootstrap') inside the file? Is it indifferent? — Lajos Arpad
– Lajos Arpad, Commented Aug 7, 2019 at 0:39
@msg I cannot make it work, obviously, I do not know how yarn works and didn't find sources which explain in an easy manner how it should be used. I guess I will just link css and js manually, it's more effective as far as I know than yarn. — Lajos Arpad
– Lajos Arpad, Commented Aug 7, 2019 at 1:08
@msg Symfony docs gives me no clue about versions here: symfony.com/doc/current/frontend/encore/bootstrap.html — Lajos Arpad
– Lajos Arpad, Commented Aug 7, 2019 at 1:15
@msg I have edited my question. I have done yarn add [email protected], I have added require('bootstrap'), yet it cannot find it. I have even downloaded bootstrap 3.3.1.zip and attempted to yarn add it, but was not successful in doing it, even after converting to tar.gz, due to a yarn bug. It has a solution (github.com/yarnpkg/yarn/pull/509/files) but do we really need to start developing yarn in order to install Bootstrap datetimepicker via yarn? — Lajos Arpad
– Lajos Arpad, Commented Aug 7, 2019 at 1:59

zx485 · Accepted Answer · 2019-10-01 21:19:09Z

2

The process is simple

Add a class to a formType field

'attr' => ['class' => 'js-datepicker'],

Install with yarn the JQuery plugin for datepicker
```
yarn add bootstrap-datepicker
```
Create a file in assets/js for datepicker configuration

Add in webpack encore the entry

 .addEntry('datepicker', [
    './assets/js/datepicker.js'
])

Add entry link tag in template

{% block stylesheet %}
{{ encore_entry_link_tags('datepicker') }}
{% endblock %}

Add entry script tag in template

{% block javascripts %}
{{ encore_entry_script_tags('datepicker') }}
{% endblock %}

edited Oct 1, 2019 at 21:19

zx485

29.1k28 gold badges55 silver badges65 bronze badges

answered Oct 1, 2019 at 19:46

Daniel Morfa Vega

766 bronze badges

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

Collectives™ on Stack Overflow

How to "install" Bootstrap Datetimepicker on Symfony?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related