[4.x] Webpack Encore css datetimepicker

Bonjour,

Depuis plus d'une semaine, je tente une chose apparemment classique, à savoir utiliser datetimepicker au sein de mon projet dans lequel est inclus le webpack Encore, mais je m'arrache les cheveux 8O

Hier soir, j'ai enfin réussi à faire apparaître quelque chose, mais lorsque je clique sur mon champ date, la mise en forme est complètement explosée :

Pièce jointe 436512

J'ai l'impression que cela vient du css, mais je ne sais pas comment résoudre ceci.

Voici mon code :

Dans mon template de base (base.html.twig) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
        {% block stylesheets %} 
            {# 'app' must match the first argument to addEntry() in webpack.config.js #} 
            {{ encore_entry_link_tags ( 'appCss' ) }} 
 
            <!-- Renders a link tag (if your module requires any CSS)
            <link rel="stylesheet" src="/build/app.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
 
            <link rel="stylesheet" src="css/bootstrap-datetimepicker.min.css"> -->
 
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css"> 
            <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.47/css/bootstrap-datetimepicker.min.css">
 
        {% endblock %}

Dans le template de mon formulaire dans lequel se trouve mon champs date (createAdvert.html.twig) :

Code:

1
2
3
4
5
6
7
8
    {% block javascripts %}
        {{ parent() }} 
        {{ encore_entry_script_tags('addAdvert') }} 
        <script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
    {% endblock %}
 
{% endblock body %}

Mon fichier js principal, lié à mon template principal (app.js) :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */
 
 // any CSS you require will output into a single css file (app.css in this case)
import '../css/app.scss';
 
// Need jQuery? Install it with "yarn add jquery", then uncomment to require it.
import $ from 'jquery';
 
global.$ = $;
 
require('jquery-datetimepicker');
require('bootstrap');
 
$(document).ready(function() {
    $('[data-toggle="popover"]').popover();
});
 
$ ( document ). ready ( function () {
    // you may need to change this code if you are not using Bootstrap Datepicker
    $('.js-datepicker'). datetimepicker ({format: 'aaaa-mm-jj hh: ii'});
});

D'avance, je vous remercie pour votre aide.