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
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 :
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) :
Dans le template de mon formulaire dans lequel se trouve mon champs date (createAdvert.html.twig) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 %}
Mon fichier js principal, lié à mon template principal (app.js) :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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 %}
D'avance, je vous remercie pour votre aide.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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'}); });
Partager