Jquery, datepicker et .append

Version imprimable

Bonjour à tous,

Je souhaite utiliser plusieurs 'datepicker' dans un formulaire HTML afin de calculer une durée en jours. Ce formulaire contient au départ une ligne avec deux champs pour la saisie des dates et un pour afficher le résultat. Un bouton propose à l'utilisateur de rajouter un nouvelle ligne pour une nouvelle saisie.
Cette nouvelle ligne est créée par une fonction utilisant la méthode append de JQuery.

Elle s'affiche correctement, mais le datepicker ne fonctionne pas sur les nouveaux champs de saisie des dates.

Merci par avance pour votre aide.

Le code HTML

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<form id="saisieDeclarations">
Début :
    <input type="text" class="datepicker" id="dateDebut" name="dateDebut" />
Fin :
    <input type="text" class="datepicker" id="dateFin" name="dateFin" />
    <br /><br />
    <input type="text" name="nbr" id="nbr" />
    <br /><br />
    <table>
        <tr id="ajoutLigne"></tr>
    </table>
    <input type="button" value="Ajouter" onclick="ajoutLigne()" />
</form><br>...<br><script>var compteur=1;</script><br>

Le code JS (ajout de la ligne)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function ajoutLigne(){
 
        compteur = compteur + 1;
 
    // Ajout de la nouvelle ligne du formulaire
 
        var new_element = '<td><input type="text" class="datepicker" id="datepickerD'+compteur+'" name="dateDebut'+compteur+'" required="required" /></td>';
        new_element = new_element+'"<td><input type="text" class="datepicker" id="datepickerF'+compteur+'" name="dateFin'+compteur+'" required="required" /></td>"';
        new_element = new_element+'<td><input type="text" name="nbr'+compteur+'" pattern="[0-9]{0,4}" placeholder="0000" value = "0" /></td>';
 
        $('#ajoutLigne').append(new_element);
 
        // Déplacement de l'id d'insertion
 
        $('tr[id="ajoutLigne"]').after('<tr id="ajoutLigne2"></tr>');
        $('tr[id="ajoutLigne"]').removeAttr('id');
        $('tr[id="ajoutLigne2"]').attr('id','ajoutLigne');
}

Le code JS (datepicker)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
	jQuery(function($){
 
    $.datepicker.setDefaults( $.datepicker.regional['fr'] );
    $('input').filter('.datepicker').datepicker({
        dateFormat: 'yy-mm-dd',
        minDate : 0,
        onSelect : function(date){ 
                        document.forms['saisieDeclarations'].elements['nbr'].value = soustraitDates();
                    }
    });
});

Bonsoir

Ce problème a déjà été traité plus d'une fois sur ce forum. Il faut détruire et reconstruire le UI Datepicker.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<form id="saisieDeclarations">
Début :
    <input type="text" class="datepicker" id="dateDebut" name="dateDebut" />
Fin :
    <input type="text" class="datepicker" id="dateFin" name="dateFin" />
    <br /><br />
    <input type="text" name="nbr" id="nbr" />
    <br /><br />
 
    <table>
        <tr id="ajoutLigne">
 
        </tr>
    </table>
 
    <input id="btnAjoutLigne" type="button" value="Ajouter une ligne" />
 
</form>

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
$( function(){
 
    $.datepicker.setDefaults( $.datepicker.regional['fr'] );
 
    var compteur = 1,
    	ObjDatepickerOptions = {
			"minDate" : "-26d",
			"maxDate" : "+1m +1w",
			"dateFormat" : 'yy-mm-dd'
    	};
 
    $( "input.datepicker" ).datepicker( ObjDatepickerOptions );
 
	function ajoutLigne(){
		compteur++;
 
		var jObj = $( "#ajoutLigne" ),
			jObjTbody = jObj.parent();
 
		// Ajout de la nouvelle ligne du formulaire
 
        var new_element = '<tr><td>' +
	        	'<input type="text" class="datepicker" id="datepickerD' + 
	        	compteur + 
	        	'" name="dateDebut' + 
	        	compteur + 
	        	'" required="required" />' +
        	'</td><td>' +
        		'<input type="text" class="datepicker" id="datepickerF' + 
        		compteur + 
        		'" name="dateFin' + 
        		compteur + 
        		'" required="required" />' +
        	'</td><td>' + 
        		'<input type="text" name="nbr' + 
        		compteur + 
        		'" pattern="[0-9]{0,4}" placeholder="0000" value = "0" />' + 
        	'</td></tr>';
 
        jObjTbody
        	.append( new_element )
        	.append( jObj );
    }
 
    $( "#btnAjoutLigne" ).on( "click", function(){
    	 ajoutLigne();
 
    	$( "input.hasDatepicker" ).datepicker( "destroy");
 
    	$( "input.datepicker" ).datepicker( ObjDatepickerOptions );
 
    });
 
});

02/10/2013, 08h53
plucas29

Bonjour,

et merci pour cette réponse. Une épine en moins dès que je l'aurai appliquée. La prochaine fois en tous cas j'essaierai de mieux lire le forum, car je n'ai pas trouvé les discussions traitant de ce problème.
02/10/2013, 09h43
danielhagnoul

Bonjour

Citation:

Envoyé par plucas29

[...] La prochaine fois en tous cas j'essaierai de mieux lire le forum, car je n'ai pas trouvé les discussions traitant de ce problème.

Plus le forum grossit, moins c'est évident.

Il fut une époque où comme modérateur je modifiais presque tous les titres pour qu'ils respectent un format commun et qu'ils soient mieux en accord avec le sujet traité, mais c'est déjà très loin.

Aujourd'hui, je suis obligé d'utiliser systématiquement l'outil recherche avancé pour simplement retrouver une de mes réponses ou un de mes codes et je n'y réussis pas toujours. :mouarf: