Clonage d’objects datepicker

J’ai un champ de saisie que je définis comme un sélecteur de date dans une classe CSS. Je veux maintenant cloner ce champ d’entrée et le faire pour que les entrées clonées soient également des sélecteurs de date.

Après avoir lu diverses sources, j’ai été amené à croire que le code suivant devrait fonctionner, mais il ne fonctionne pas. J’espérais que peut-être quelqu’un pourrait m’aider à comprendre ce que je faisais mal 🙂

Et voici le javascript:

  $(document).ready(function(){ $('.calendar').datepicker(); $('#clone').click(function() { $('.calendar:last').clone().append().insertAfter('.calendar:last'); }); });

Jusqu’à présent, le champ de saisie est dupliqué et est inséré après la dernière instance, mais le sélecteur de date ne fonctionne pas. J’ai essayé de passer ‘true’ à la fonction clone mais cela m’a donné une erreur en disant que inst n’était pas défini .

Toute aide serait appréciée 🙂

Changez-le en ceci:

 $('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker();

Dommage que je ne puisse plus commenter la réponse donnée ci-dessus, mais le code rest faible! Le datepicker apparaît dans l’élément d’entrée cloné, mais utilise la valeur de date sélectionnée dans le champ de saisie d’origine et laisse le champ de saisie cloné vide. Des suggestions?

modifier:

L’utilisation du code suivant a corrigé le problème pour moi.

 $('.datum',clone).removeClass("hasDatepicker").attr('id',"").datepicker();

(Notez que j’ai cloné un wrapper et que je ne cible que le champ de saisie ‘datum’ de ce wrapper.)

Après avoir supprimé la classe comme suggéré ci-dessus, j’ai également supprimé l’identifiant de l’élément d’entrée cloné. C’est la même chose que l’original, c’est pourquoi j’ai mis à jour le champ de saisie d’origine avec la date sélectionnée dans la zone sélecteur de date.

J’ai apporté les modifications suivantes et cela fonctionne.

Avant:

  $('#clone').click(function() { $('.calendar:last').clone().append().insertAfter('.calendar:last'); });

Après:

  $('#clone').click(function() { $('.calendar:last').clone().append().insertAfter('.calendar:last').attr('id',""); });

C’est peut-être un peu tard, mais toutes les suggestions ci-dessus n’ont pas fonctionné pour moi, j’ai trouvé une solution facile pour cela.

Tout d’abord, la cause du problème: JQuery atsortingbue datepicker à l’identificateur d’élément. si vous clonez un élément, le même identifiant peut également être cloné. ce que jQuery n’aime pas. Vous pouvez vous retrouver avec une erreur de référence null ou la date atsortingbuée au premier champ de saisie, quel que soit le champ de saisie sur lequel vous cliquez.

Solution:

1) détruit le sélecteur de date 2) atsortingbue de nouveaux identifiants uniques à tous les champs de saisie 3) atsortingbue un sélecteur de date pour chaque entrée

Assurez-vous que votre entrée est quelque chose comme ça

Avant de cloner, détruisez datepicker

 $('.n1datepicker').datepicker('destroy');

Après avoir cloné, ajoutez également ces lignes

 var i = 0; $('.n1datepicker').each(function () { $(this).attr("id",'date' + i).datepicker(); i++; });

et la magie arrive