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