Discussion :

[Kakon]

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>

[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.

[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

[NoSmoking]

Lors de la création des éléments supplémentaires il te faut assigner un nouveau datepicker.

[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.

[NoSmoking]

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

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

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 :

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

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

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

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

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

[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