IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Symfony PHP Discussion :

Mise en place DatePicker [4.x]


Sujet :

Symfony PHP

  1. #1
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2018
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Octobre 2018
    Messages : 31
    Points : 17
    Points
    17
    Par défaut 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 :

    Nom : Capture.PNG
Affichages : 6957
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
            ]);
        }
    }

    Mais, malgré tout ça, cela m'indique une erreur js :

    Nom : Capture2.PNG
Affichages : 6365
Taille : 3,3 Ko

    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.

  2. #2
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Janvier 2012
    Messages
    2 396
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Janvier 2012
    Messages : 2 396
    Points : 4 825
    Points
    4 825
    Par défaut
    l'erreur signifie que tu n'as pas chargé la bibliothèque jQuery correctement, regarde ici

  3. #3
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2018
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Octobre 2018
    Messages : 31
    Points : 17
    Points
    17
    Par défaut
    Bonjour

    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 javascrip : 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
    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

  4. #4
    Membre à l'essai
    Homme Profil pro
    Lycéen
    Inscrit en
    Octobre 2018
    Messages
    31
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Lycéen

    Informations forums :
    Inscription : Octobre 2018
    Messages : 31
    Points : 17
    Points
    17
    Par défaut
    Bonjour,

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

  5. #5
    Membre à l'essai
    Homme Profil pro
    Développeur informatique
    Inscrit en
    Mars 2018
    Messages
    10
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : Santé

    Informations forums :
    Inscription : Mars 2018
    Messages : 10
    Points : 13
    Points
    13
    Par défaut Pas d'explications
    C'est chouette que tu aies trouvé. Mais peux tu expliquer ?

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [BootStrap 4] Mise en place datepicker
    Par laurentSc dans le forum Bibliothèques & Frameworks
    Réponses: 2
    Dernier message: 02/02/2019, 14h58
  2. [Angular 5] Mise en place datepicker
    Par keokaz dans le forum Angular
    Réponses: 7
    Dernier message: 07/04/2018, 23h58
  3. [C#] Mise en place d'un site multilingue
    Par regbegpower dans le forum ASP.NET
    Réponses: 6
    Dernier message: 19/03/2004, 20h15
  4. mise en place serveur web intranet
    Par gui4593 dans le forum Installation
    Réponses: 7
    Dernier message: 01/01/2004, 19h18
  5. Mise en place d'index....??
    Par liv dans le forum Requêtes
    Réponses: 6
    Dernier message: 18/12/2003, 12h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo