Bonjour,
J'ai besoin d'aide concernant Symfony 4. En effet, j'ai un problème avec l'installation de DatePicker :/
J'utilise la doc de Symfony : https://symfony.com/doc/current/refe...ypes/date.html
Voici une capture d'écran du tutos :
Premièrement, il faut installer Boostrap Datepicker. Pour cela, j'ai utilisé le site packagist : https://packagist.org/packages/etern...rap-datepicker
Et, dans docker, j'ai effectué la commande "composer require eternicode/bootstrap-datepicker" pour avoir le package.
Voici mon fichier "composer.json":
Code json : 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88 { "type": "project", "license": "proprietary", "require": { "php": "^7.1.3", "ext-ctype": "*", "ext-iconv": "*", "components/jquery": "^3.3", "eternicode/bootstrap-datepicker": "^1.8", "opencage/geocode": "^2.0", "robloach/component-installer": "^0.2.3", "sensio/framework-extra-bundle": "^5.1", "stof/doctrine-extensions-bundle": "^1.3", "symfony/asset": "4.2.*", "symfony/console": "4.2.*", "symfony/dotenv": "4.2.*", "symfony/expression-language": "4.2.*", "symfony/flex": "^1.1", "symfony/form": "4.2.*", "symfony/framework-bundle": "4.2.*", "symfony/monolog-bundle": "^3.1", "symfony/orm-pack": "*", "symfony/process": "4.2.*", "symfony/security-bundle": "4.2.*", "symfony/serializer-pack": "*", "symfony/swiftmailer-bundle": "^3.1", "symfony/translation": "4.2.*", "symfony/twig-bundle": "4.2.*", "symfony/validator": "4.2.*", "symfony/web-link": "4.2.*", "symfony/webpack-encore-bundle": "^1.0", "symfony/yaml": "4.2.*" }, "require-dev": { "doctrine/doctrine-fixtures-bundle": "^3.0", "fzaninotto/faker": "^1.8", "symfony/debug-pack": "*", "symfony/maker-bundle": "^1.0", "symfony/profiler-pack": "*", "symfony/test-pack": "*", "symfony/web-server-bundle": "4.2.*" }, "config": { "preferred-install": { "*": "dist" }, "sort-packages": true }, "autoload": { "psr-4": { "App\\": "src/" } }, "autoload-dev": { "psr-4": { "App\\Tests\\": "tests/" } }, "replace": { "paragonie/random_compat": "2.*", "symfony/polyfill-ctype": "*", "symfony/polyfill-iconv": "*", "symfony/polyfill-php71": "*", "symfony/polyfill-php70": "*", "symfony/polyfill-php56": "*" }, "scripts": { "auto-scripts": { "cache:clear": "symfony-cmd", "assets:install %PUBLIC_DIR%": "symfony-cmd" }, "post-install-cmd": [ "@auto-scripts" ], "post-update-cmd": [ "@auto-scripts" ] }, "conflict": { "symfony/symfony": "*" }, "extra": { "symfony": { "allow-contrib": false, "require": "4.2.*" } } }
Je pense avoir tous les packages possible pour utiliser mon DatePicker ?
Deuxièmement, j'ai installé mon code Javascript dans mon modèle comme vous pouvez le voir dans mon fichier "results.html.twig" :
Code twig : 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56 {% extends 'base.html.twig' %} {% block title %}{{ 'search'|trans }}{% endblock %} {% block body %} <h1>{{ 'petsitters.list'|trans }} ð </h1> <div class="row"> <div class="col-md-2"> {{ form_start(form) }} {{ form_rest(form) }} <button type="submit" class="btn btn-primary">{{ 'filter'|trans }}</button> {{ form_end(form) }} </div> <div class="col-md-10"> <div class="row"> {% for petsitter in petsitters %} <div class="col-3"> <div class="card"> <img src="https://via.placeholder.com/256x128" alt="Profile picture" class="card-img-top"> <div class="card-body"> <h5 class="card-title">{{ petsitter.fullname }}</h5> <div class="card-text"> <h6>{{ 'petsitter.pets'|trans }} :</h6> <ul> {%- for animal in petsitter.animals -%} <li> <strong>{{ animal.name }}</strong> <span class="badge badge-primary">{{ animal.species.label }}</span> </li> {%- endfor -%} </ul> </div> </div> </div> </div> {% if loop.index % 4 == 0 %}<div class="w-100"></div>{% endif %} {% else %} <p>{{ 'no_results'|trans }}</p> {% endfor %} </div> </div> </div> {% endblock %} {% block javascripts %} {{ parent() }} <script> $(document).ready(function() { $('.js-datepicker').datepicker({ format: 'yyyy-mm-dd' }); }); </script> {% endblock %}
Et troisième et dernièrement, j'ai installé mon builder dans mon fichier "SearchType.php" :
Code php : 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
27
28
29
30
31
32 <?php namespace App\Form; use App\Utils\Search; use Symfony\Component\Form\AbstractType; use Symfony\Component\Form\Extension\Core\Type\DateType; use Symfony\Component\Form\FormBuilderInterface; use Symfony\Component\OptionsResolver\OptionsResolver; class SearchType extends AbstractType { public function buildForm(FormBuilderInterface $builder, array $options) { $builder ->add('begin', DateType::class, array( 'widget' => 'single_text', 'html5' => false, 'attr' => ['class' => 'js-datepicker'],)) ->add('end', DateType::class, array( 'widget' => 'single_text', 'html5' => false, 'attr' => ['class' => 'js-datepicker'],)); } public function configureOptions(OptionsResolver $resolver) { $resolver->setDefaults([ 'data_class' => Search::class ]); } }
Mais, malgré tout ça, cela m'indique une erreur js :
Et, quand je clique sur le champ date rien ne se passe ...
Quel est le problème ? Je bloque :/
Merci d'avance pour votre aide et bon week-end
PS : Désolé pour ce roman, mais, j'essaye d'expliquer au mieux la situation.
Partager