Datepicker Jquery, génération de nouveaux champs

Version imprimable

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:

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>

05/08/2012, 16h21
NoSmoking

Bonjour,
une ID doit être UNIQUE dans un document, ce qui n'est plus le cas lorsque tu procéde à un ajout, utilisation des même id to et from.

Lors de la création des éléments supplémentaires il te faut assigner un nouveau datepicker.
07/08/2012, 19h22
Kakon

Tout d'abord, merci pour ta réponse, j'entends bien ce que tu me dis et je comprends, j'étais d'ailleurs au courant ^^. Je vais donc expliciter ma demande qui apparemment ne l'était pas:
Je ne vois pas comment faire pour faire fonctionner le système dont je parles, vu qu'actuellement ça utilise l'id, et que j'ai essayé avec une classe plutot qu'une idée et que ça ne marche pas :s
07/08/2012, 23h26
NoSmoking

Citation:

Envoyé par NoSmoking

Lors de la création des éléments supplémentaires il te faut assigner un nouveau datepicker.
08/08/2012, 05h13
Kakon

Hum oui ça aussi j'avais compris, tu avais été assez clair, cependant après relecture, c'est moi qui ai pas été aussi précis que je le pensais.

Le souci c'est que ces datepickers sont utiliser sur un site de location d'appartement pour que la personne proposant un appartement puisse dire quelles sont les périodes où l'appartement est disponible.

Or si on prend le pire des cas pas rationnel, il pourrait y avoir 365*2 datepicker différent (si on considère que l'utilisateur met en location son appartement tous les jours de l'année indépendamment les uns des autres). Je ne vais tout de même pas préparé 730 datepicker différent dans le code dans la simple hypothèse du pire cas, au tant d'un point de vu optimisation que simple logique.

Donc j'aimerai savoir, s'il y a une solution qui pourrais me permettre de faire 2 génériques (un pour la date de début et un pour la date de fin) me permettant ensuite de faire apparaitre les différent champs à la bonne volonté de l'utilisateur.

Voili voilou.

tout d'abord lorsque l'on utilise jQuery autant l'utiliser complétement, je parle de la création de tes nouveaux contrôle de date.

Je te propose de revoir cela en s'appuyant sur une structure de ce type

Code:

1
2
3
4
5
6
7
8
9
10
11
<fieldset style="width:850px;">
<legend>Disponibilités</legend>
<div>
  <div class="demo" style="display:none">
    <label>Du :</label><input type="text" name="from[]">
    <label>Au :</label><input type="text" name="to[]">
  </div>
</div>
<input type="button" value="Ajouter une plage de disponibilité" onclick="addDate();">
<br>
</fieldset>

ceci est le code de départ avec les contrôles dans une DIV masqué, il nous suffira donc de cloner celle ci est de la rendre visible.

Maintenant il faut créer un function qui va ajouter les contrôles nécessaires

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
function addDate(){
  var sId, oParent = $('.demo').parent();
  // recup 1st element est le modele
  var oSrc = $('.demo').eq(0);
  // creation d'un clone avec les descendants
  var oDiv = oSrc.clone();
  // ajout element
  oParent.append( oDiv);
  // get input ajoutes
  oInput = oDiv.find('input');
  oLabel = oDiv.find('label');
  // vide les valeurs
  oInput.val('');  // pas forcement necessaire
  // modif des id
  sId = 'from_' +new Date().getTime();
  oInput.eq(0).attr('id',  sId);
  oLabel.eq(0).attr('for', sId);
  // modif des id
  sId = 'to_' +new Date().getTime();
  oInput.eq(1).attr('id',  sId);
  oLabel.eq(1).attr('for', sId);
  // cree instance datepicker
  setDatepicker( oInput.eq(0), oInput.eq(1));
  // affiche l'élément
  oDiv.toggle();
}

la fonction datepicker est semblable à ce que tu a fait à savoir

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function setDatepicker( objFrom, objTo){
  objFrom.datepicker({
     defaultDate: "+1w",
     changeMonth: true,
     numberOfMonths: 3,
     onSelect: function( selectedDate ) {
       objTo.datepicker( "option", "minDate", selectedDate );
    }
  });
  objTo.datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 3,
    onSelect: function( selectedDate ) {
      objFrom.datepicker( "option", "maxDate", selectedDate );
    }
  });
}

il ne te reste plus qu'à initialiser le premier élément visible au chargement de la page

Code:

1
2
3
$(function(){
  addDate();
});

voilà pour la philosophie de fonctionnement, à toi d'adapter.

08/08/2012, 18h04
Kakon

Fantastique !!!!! Merci énormément, tu ne peux imaginer à quel point tu m'as aidé !! Pour jQuery j'avoue que je suis pas un grand utilisateur, je l'utilise très ponctuellement pour des éléments particulier (type datepicker, upload de fichier) mais jamais en framework à part entière, dans un futur plus ou moins proche faudra que je me penche là dessus plus sérieusement ^^

Par contre, si je puis me permettre d'abuser, je me suis aperçut d'un truc tout bête mais auquel je n'avais pas pensé: un bouton pour supprimer les champs en qui auraient été créé en trop par l'utilisateur, et vu que je connaissais pas la méthode clone(), j'ai un peu cherché et j'ai vu une méthode remove() et detach() mais j'avoue ne pas voir comment/sur quoi les utiliser :s

Encore merci beaucoup pour ton aide, promis après je t'embêtes plus :)

Citation:

j'ai vu une méthode remove()

bien vu!

Code:

1
2
3
4
5
6
function removeDate(){
  // prend le dernier
  var oDiv = $('.demo').eq(-1);
  // supprime element
  oDiv.remove();
}

J'ai fais une petite modif en rajoutant un petit truc pour que le bouton de suppression soit présent ou pas en fonction de s'il y a ou pas des champs de datepicker ^^ (je vais mettre mon code à la fin pour aider ce qui tomberai sur se post en cherchant le même genre de chose.

Merci encore beaucoup pour toute ton aide NoSmoking, tu me sauve vraiment la mise :)

Sur ce, je vais mettre mon post en résolut, et retourner à mon bac à sable jQuery ^^

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
 
    <form name="general" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" id="depot_annonce">
 
            <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 addDate(){
					  var sId, oParent = $('.dispo').parent();
					  // recup 1st element est le modele
					  var oSrc = $('.dispo').eq(0);
					  // creation d'un clone avec les descendants
					  var oDiv = oSrc.clone();
					  // ajout element
					  oParent.append( oDiv);
					  // get input ajoutes
					  oInput = oDiv.find('input');
					  oLabel = oDiv.find('label');
					  // vide les valeurs
					  oInput.val('');  // pas forcement necessaire
					  // modif des id
					  sId = 'from_' +new Date().getTime();
					  oInput.eq(0).attr('id',  sId);
					  oLabel.eq(0).attr('for', sId);
					  // modif des id
					  sId = 'to_' +new Date().getTime();
					  oInput.eq(1).attr('id',  sId);
					  oLabel.eq(1).attr('for', sId);
					  // cree instance datepicker
					  setDatepicker( oInput.eq(0), oInput.eq(1));
					  // affiche l'élément
					  oDiv.toggle();
					  // affiche le bouton "Supprimer une plage de disponibilité" 
					  if ( $(".dispo").length > 1 ) { $(".removeDate").fadeIn("fast"); }
					}
					function removeDate(){
					  // prend le dernier
					  var oDiv = $('.dispo').eq(-1);
					  // supprime element
					  oDiv.remove();
					  // cache le bouton "Supprimer une plage de disponibilité" si une seule plage présente
					  if ( $(".dispo").length < 2 ) { $(".removeDate").fadeOut("fast"); }
					}
					function setDatepicker( objFrom, objTo){
					  objFrom.datepicker({
						 defaultDate: "+1w",
						 changeMonth: true,
						 numberOfMonths: 3,
						 onSelect: function( selectedDate ) {
						   objTo.datepicker( "option", "minDate", selectedDate );
						}
					  });
					  objTo.datepicker({
						defaultDate: "+1w",
						changeMonth: true,
						numberOfMonths: 3,
						onSelect: function( selectedDate ) {
						  objFrom.datepicker( "option", "maxDate", selectedDate );
						}
					  });
					}
				</script>
                <div>
                  <div class="dispo" style="display:none">
                    <label>Du :</label><input type="text" name="from[]">
                    <label>Au :</label><input type="text" name="to[]">
                  </div>
                </div>
                <input type="button" value="Ajouter une plage de disponibilité" onclick="addDate();">
                <br>
                <input type="button" value="Supprimer une plage de disponibilité" onclick="removeDate();" class="removeDate">
                <br>
            </fieldset>
            <script>
				$(function(){
				  addDate();
				  $(".removeDate").hide();
				});
			</script>
        </center>
        <input type="hidden" name="maj" value="non" />
        <input class="submit" type="submit" value="Envoyer >" />
    </form>