comment mettre un Datepicker avec un champ collection dans un formulaire

**lou_lou43** · 22/05/2012, 23h19

Bonsoir tout le monde,

Ce soir je suis tombé sur un problème que je n'ai pas encore réussi a résoudre, je vous explique l'embrouille :
J'ai un formulaire avec plusieurs champs. Un de ces champ et de type "collection" pour des dates, j'aimerais donc pourvoir utiliser le Datepicker jquery ui.

Mais voilà j'ai fais plusieurs essais, au bout d'un moment j'ai trouvé un truc qui me semblait bien marcher. Mais j'ai trouvé la faille de mon astuce : le Datepicker de n'importe quel sous champ de la collection changeait la date du PREMIER sous champ.

Donc la je suis désespérer, et je vous demande de l'aide.

Je vous met mon code dans l'état actuel (comme cité au-dessus) :

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
 
<?php
namespace Insep\SiteBundle\Form\Cours;
 
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilder;
 
 
class DateType extends AbstractType{
 
    public function getName() {
        return "insep_sitebundle_datetype";
    }
 
    public function buildForm (FormBuilder $builder,  array $options) {
        $builder->add('date', 'date', array(
                'widget'    => 'single_text',
                'attr' => array('class' => 'datepicker'),
                'input'    => 'string',
                'format' => 'dd/mm/yyyy',
                'required'  => true));
    }
 
}
 
?>

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
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
 
<?php
namespace Insep\SiteBundle\Form\Cours;
 
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilder;
 
 
class CoursCalendrierType extends AbstractType{
 
    private $liste_ens;
    private $choix_heures;
 
    public function getName() {
        return "insep_sitebundle_courscalendriertype";
    }
 
    public function buildForm (FormBuilder $builder,  array $options) {
        $builder->add('enseignant', 'choice', array(
                'choices'   => $this->liste_ens,
                'multiple'  => false,
                'expanded'  => false,
                'required'  => true))
            ->add('debut', 'time', array(
                'input'     => 'string'))
            ->add('fin', 'time', array(
                'input'     => 'string'))
            ->add('heure', 'choice', array(
                'choices'   => $this->choix_heures,
                'multiple'  => false,
                'expanded'  => true,
                'required'  => true))
 
            ->add('dates', 'collection', array(
                'type'      => new \Insep\SiteBundle\Form\Cours\DateType,
                'prototype' => true,
                'allow_add' => true,
                'required'  => true
                ));
    }
 
    public function __construct (array $liste) {
        foreach ($liste as $value) {
            $this->liste_ens[$value->getEnseignant()->getId()] = $value->getEnseignant()->getUser()->getNom().' '.
                    $value->getEnseignant()->getUser()->getPrenom();
        }
 
        $this->choix_heures['1'] = '8H00 - 10H00';
        $this->choix_heures['2'] = '14H00 - 16H00';
        $this->choix_heures['3'] = 'Autre (renseigner ci-dessous)';
    }
}
 
?>

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
 
{% extends "::layout.html.twig" %}
 
{% block title %}
    {{ parent() }} - Ajouter un cours
{% endblock %}
 
{% block stylesheets %}
    {{ parent() }}
    <link rel="stylesheet" href="{{ asset('css/admin.css') }}" type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/saisieCours.css') }}" type="text/css" />
    <link rel="stylesheet" href="{{ asset('css/ui-lightness/jquery-ui-1.8.20.custom.css') }}" type="text/css" />
{% endblock %}
 
{% block menu %}
    {{ parent() }}
{% include  "InsepSiteBundle:Site:menuAdmin.html.twig" %}
{% endblock %}
 
{% block body %}
 
    <h1>Ajouter un cours</h1>
    <br>
    <br>
 
    <form action="{{ path('InsepSiteBundle_saisieCalendrier', { 'id_module': module.id, 'id_promo': promo.id }) }}"
    {{ form_enctype(form) }} method="POST" onchange="checkHeure();">
 
              <table class="table">
            <tr><td>Promotion :</td><td>{{promo.nom}}</td></tr>
            <tr><td>Module :</td><td>{{module.nom}}</td></tr>
            <tr>
                <td>Enseignant :</td>
                <td>
                    {{ form_errors(form.enseignant) }}
                    {{ form_widget(form.enseignant) }}
                </td>
            </tr>
            <tr>
                <td>Horaire :</td>
                <td>
                    {{ form_errors(form.heure) }}
 
                    {% for horaire in form.heure %}
                        {{ form_widget(horaire) }}
                        {{ form_label(horaire) }}
                        <br>
                    {% endfor %}
                    <div id='heure'>
                        <br>
                        Debut : {{ form_widget(form.debut) }}
                        Fin : {{ form_widget(form.fin) }}
                    </div>
                </td>
            </tr>
            <tr>
                <td>Date(s) :</td>
                <td>
                    <a href="#" id="add_date">Ajouter une date</a>
                    <br>
                    {{ form_errors(form.dates) }}
                    {{ form_widget(form.dates) }}
                </td>
            </tr>
        </table>
 
        {{ form_rest(form) }}
        <br>
        <input type="submit" class="btn btn-primary" id="_submit" name="_submit" value="Continuer" />
    </form>
{% endblock %}
 
{% block javascripts %}
    {{ parent() }}
 
    <script type="text/javascript" src="{{ asset('js/jquery-ui-1.8.20.custom.min.js') }}"></script>
 
 
    <script type="text/javascript">
        function checkHeure () {
            if ($('input:radio[name=insep_sitebundle_courscalendriertype[heure]]:checked').val() == '3') {
                $('#heure').css("display", "block");
            } else {
                $('#heure').css("display", "none");
            }
        }
 
 
        $(document).ready(function() {
        // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
        var $container = $('#insep_sitebundle_courscalendriertype_dates');
 
        $(".datepicker").datepicker();
 
        // On définit une fonction qui va ajouter un champ.
        function add_date() {
            // On définit le numéro du champ (en comptant le nombre de champs déjà ajoutés).
            index = $container.children().length;
 
            // On ajoute à la fin de la balise <div> le contenu de l'attribut « data-prototype »,
            // après avoir remplacé la variable $$name$$ qu'il contient par le numéro du champ.
            $container.append(
                $($container.attr('data-prototype').replace(/\$\$name\$\$/, index))
            );
 
 
            $(".datepicker").datepicker();
        }
 
        // On ajoute un premier champ directement s'il n'en existe pas déjà un.
        if($container.children().length == 0) {
            add_date();
        }
 
        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $('#add_date').click(function() {
            add_date();
        });
    });
    </script>
{% endblock %}

Merci de votre aide

**arnooo999** · 23/05/2012, 09h36

Bonjour,
bizarre comme comportement

essaie ceci:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
 
$container.find('.datepicker').each(function(index,element){
   $(element).datepicker();
});
 
//ou bien 
$container.delegate('.datepicker','focus',function(evt){
   $(this).datepicker();
});
//ce qui évite de rajouter l'initialisation du datepicker dans ta fonction add_date

**lou_lou43** · 23/05/2012, 23h23

C'est bon j'ai trouvé d'où venait mon problème, je vous met le javascript modifié :

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
27
28
29
30
        $(document).ready(function() {
        // On récupère la balise <div> en question qui contient l'attribut « data-prototype » qui nous intéresse.
        var $container = $('#insep_sitebundle_courscalendriertype_dates');

        // On définit une fonction qui va ajouter un champ.
        function add_date() {
            // On définit le numéro du champ (en comptant le nombre de champs déjà ajoutés).
            index = $container.children().length;

            // On ajoute à la fin de la balise <div> le contenu de l'attribut « data-prototype »,
            // après avoir remplacé la variable $$name$$ qu'il contient par le numéro du champ.
            $container.append(
                $($container.attr('data-prototype').replace(/\$\$name\$\$/g, index))
            );


            $(".datepicker").datepicker();
        }

        // On ajoute un premier champ directement s'il n'en existe pas déjà un.
        if($container.children().length == 0) {
            add_date();
        }

        // On ajoute un nouveau champ à chaque clic sur le lien d'ajout.
        $('#add_date').click(function() {
            add_date();
        });
    });

Merci quand même arnooo999

comment mettre un Datepicker avec un champ collection dans un formulaire

Symfony PHP

Discussions similaires

Partager

Partager