Bonjours à tous,
voila, j'ai un souci (surement tout bidon mais pas moyen de trouver la solution) sur un datepicker jquery.

En effet, je voudrai -sur un de mes sites- que l'utilisateur puis choisir une plage de date avec un champs début et un champs fin, tout en facilitant la chose avec des datepicker sur les champs.

Jusqu'à la pas de souci, je veux ensuite que, si l'utilisateur en a besoin, il puisse rajouter une autre plage de date exactement sur le même principe, j'ai donc un bouton qui me génère 2 nouveaux champs pour le debut/fin de la nouvelle plage via appendchild.

Là non plus pas de souci, cependant dans les champs généré, pas moyen de faire venir le datepicker (utilisant l'id pour le champs auquel il correspond) et je vois pas comment faire pour l'utiliser comme je souhaite le faire...

Si quelqu'un à une idée je suis fort preneur

Ci-après mon code actuel, sur-ce à bientôt en espérant une réponse.

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
            <fieldset style="width:850px;">
                <legend>Disponibilités</legend>
				<script src="../js/jquery-1.7.2.min.js" type="text/javascript"></script>
                <script src="../js/jquery-ui-1.8.22.custom.min.js" type="text/javascript"></script>
                <script>
                $(function() {
                    $( "#from" ).datepicker({
                        defaultDate: "+1w",
                        changeMonth: true,
                        numberOfMonths: 3,
                        onSelect: function( selectedDate ) {
                            $( "#to" ).datepicker( "option", "minDate", selectedDate );
                        }
                    });
                    $( "#to" ).datepicker({
                        defaultDate: "+1w",
                        changeMonth: true,
                        numberOfMonths: 3,
                        onSelect: function( selectedDate ) {
                            $( "#from" ).datepicker( "option", "maxDate", selectedDate );
                        }
                    });
                });
                </script>
                <div class="demo">
 
                <label for="from">Du :</label>
                <input type="text" id="from" name="from"/>
                <label for="to"> Au :</label>
                <input type="text" id="to" name="to"/>
 
                </div>
                <div id="dispo"></div>
                <input type="button" value="Ajouter une plage de disponibilité" onclick="ajoutDispo();"/>
				<br/>
				<input type="button" id="supdispo" value="Supprimer la derniere plage de disponibilité" style="display:none"  onclick="supDispo();" />
				<script type="text/javascript">
					var c1, c2, c3, ch1, ch2, clab1, clab2, cl1, cl2;
					function ajoutDispo() {
 
						var br = document.createElement('br');
						c1 = document.getElementById('dispo');
						c2 = c1.getElementsByTagName('input');
						c3 = c1.getElementsByTagName('label');
						ch1 = document.createElement('input');
						ch2 = document.createElement('input');
						clab1 = document.createElement('label');
						clab2 = document.createElement('label');
						cl1 = document.createTextNode('Du :');
						cl2 = document.createTextNode(' Au :');
 
						clab1.setAttribute('for', 'from');
						clab1.appendChild(cl1);
						ch1.setAttribute('type', 'text');
						ch1.setAttribute('name', 'dispo[]');
						ch1.setAttribute('id', 'from');
						clab2.setAttribute('to', 'to');
						clab2.appendChild(cl2);
						ch2.setAttribute('type', 'text');
						ch2.setAttribute('name', 'dispo[]');
						ch2.setAttribute('id', 'to');
						c1.appendChild(clab1);
						c1.appendChild(ch1);
						c1.appendChild(clab2);
						c1.appendChild(ch2);
						c1.appendChild(br);
 
						document.getElementById('supdispo').style.display = 'inline';
					}
 
					// supprimer le dernier champ;
					function supDispo() {
						if(c2.length > 0) {
							c1.removeChild(c2[c2.length - 2]);
							c1.removeChild(c2[c2.length - 1]);
							c1.removeChild(c3[c3.length - 2]);
							c1.removeChild(c3[c3.length - 1]);
							c1.removeChild(c1.getElementsByTagName('br')[c2.length]);
						}
						if(c2.length == 0) {
							document.getElementById('supdispo').style.display = 'none';
						}
					}
                </script>
            </fieldset>