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 bootstrap@3.3.1

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

Answer 1

The process is simple

1. Add a class to a formType field

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

2. Install with yarn the JQuery plugin for datepicker

   yarn add bootstrap-datepicker
   

3. Create a file in assets/js for datepicker configuration

4. Add in webpack encore the entry

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

5. Add entry link tag in template

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

6. Add entry script tag in template

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