Mise en place DatePicker

**Vengryn** · 05/01/2019, 12h14

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 :

Nom : Capture.PNG
Affichages : 7305
Taille : 43,9 Ko

Nom : Capture.PNG
Affichages : 7305
Taille : 43,9 Ko

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
        ]);
    }
}