[4.x] Mise en place DatePicker

2 pièce(s) jointe(s)

Mise en place DatePicker

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 :

Pièce jointe 438962

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:

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:

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:

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 :

Pièce jointe 438966

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.

l'erreur signifie que tu n'as pas chargé la bibliothèque jQuery correctement, regarde ici

Bonjour :D

Merci pour l'aide.
J'ai rajouté .autoProvidejQuery() dans mon fichier "webpack.config.js", mais, ça ne fonctionne pas.

Voici mon fichier "webpack.config.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
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
var Encore = require('@symfony/webpack-encore');
 
Encore
	.autoProvidejQuery()
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')
 
    /*
     * ENTRY CONFIG
     *
     * Add 1 entry for each "page" of your app
     * (including one that's included on every page - e.g. "app")
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if you JavaScript imports CSS.
     */
    .addEntry('app', './assets/js/app.js')
    //.addEntry('page1', './assets/js/page1.js')
    //.addEntry('page2', './assets/js/page2.js')
 
    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()
 
    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())
 
    // enables Sass/SCSS support
    .enableSassLoader()
 
    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()
 
    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
 
    // uncomment if you use API Platform Admin (composer req api-admin)
    //.enableReactPreset()
    //.addEntry('admin', './assets/js/admin.js')
;
 
// module.exports = Encore.getWebpackConfig();
 
const BrowserSyncPlugin = require('browser-sync-webpack-plugin');
let config = Encore.getWebpackConfig();
config.watchOptions = { poll: true, ignored: /node_modules/ };
config.plugins.push(
    new BrowserSyncPlugin({
        open: 'local',
        host: 'localhost',
        proxy: 'localhost:8080',
        notify: false,
        files: ['public/build/**/*.js', "templates/**/*.twig"]
    })
);
module.exports = config;

J'ai effectué un "yarn run encore dev --watch" pour mettre à jour mon webpack. Il fonctionne bien.

Je ne comprends pas pourquoi, j'ai toujours la même erreur :(

Bonjour,

C'est bon, j'ai trouvé mon problème. Merci;)

Pas d'explications

C'est chouette que tu aies trouvé. Mais peux tu expliquer ?