Discussion :

[plucas29]

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

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

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 :

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

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

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();
                    }
    });
});

[danielhagnoul]

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

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

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
$( 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 );
 
    });
 
});

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

[danielhagnoul]

Bonjour

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