Bootstrap datepicker in Symfony4 (Twig+Bulma) appears twice

I am developing a project in **Symfony4** (Twig + Bulma + Webpack Encore + Yarn)
I managed to generate the **datepicker** calendar from **Bootstrap** but it has a weird behavior.
When I load the page, it appears by default under the text field and never disappears, and it appears a 2nd time on top of the text field when I click on it. This one disappears if I click elsewhere on the page. [See here](https://imgur.com/a/lGFu4Ix).’
I just want the normal click and pop behavior.
Can anyone help me, please ?

Commands

yarn add bootstrap-datepicker
yarn add popper.js 
yarn add jquery --dev
yarn add bootstrap
yarn run encore dev (after editing web.config.js)

Formtype

->add('creation', DateType::class, [
                'widget' => 'single_text',
                'html5' => false,
                'attr' => ['class' => 'js-datepicker'],
])

assets/js/datepicker.js

// js
require('bootstrap-datepicker');
require('bootstrap-datepicker/js/locales/bootstrap-datepicker.fr');
import $ from 'jquery';
// css
require('bootstrap-datepicker/dist/css/bootstrap-datepicker3.css');
$(document).ready(function () {
    $('.js-datepicker').datepicker({format: 'yyyy-mm-dd'});
});

assets/js/app.js

import '../css/app.scss';
const $ = require('jquery');
require('bootstrap');

assets/css/app.scss

// Importer FontAwesome
@import "[email protected]/fontawesome-free/css/all.min.css";
// Personnalisation & import de Bulma
$primary: #0219A1;
$light  : #a8b2ea;
@import "~bulma";

base.html.twig

(...)
{% block css %}
    {{ encore_entry_link_tags('app') }}
    {{ encore_entry_link_tags('datepicker') }}
{% endblock %}
(...)
{% block js %}
    {{ encore_entry_script_tags('app') }}
    {{ encore_entry_script_tags('datepicker') }}
{% endblock %}
(...)

webpack.config.js

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

Source: Symfony Questions

Was this helpful?

0 / 0

Leave a Reply 0

Your email address will not be published. Required fields are marked *