Clonage des objets datepicker [JQuery]

Question

J'ai un champ de saisie que je définis comme un outil de saisie de date via une classe css. Je veux maintenant cloner ce champ d'entrée et l'avoir si les entrées clonées sont également des dattes. Après la lecture de diverses sources, j'ai été amené à croire que le code suivant devrait fonctionner mais ce n'est pas le cas. J'espérais peut-être quelqu'un pourrait me aider à comprendre ce que je faisais mal :)

<input type="text" id="date" name="date" class="calendar" /> 
<input type="button" id="clone" name="clone" value="Clone dates" /> 

Et voici le javascript:

<script type="text/javascript"> 
$(document).ready(function(){ 

$('.calendar').datepicker(); 

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

}); 

</script> 

Jusqu'à présent, le champ d'entrée est dupliquée et est inséré à après le dernier par exemple, mais le datpicker ne fonctionne pas. J'ai essayé de passer 'vrai' à 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 :)

Answer 1

Modifier à ceci:

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

Answer 2

à mauvais Je ne peux pas commenter plus sur la réponse donnée ci-dessus, mais le code FALES encore! L'outil datepicker s'affiche à 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:

En utilisant le code suivant fixe pour moi ..

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

(notez que j'ai cloné une enveloppe, et je suis cibler uniquement le champ de saisie « de référence » dans cette enveloppe) Après la suppression de la classe comme suggéré ci-dessus, je supprime également id 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 boîte de datepicker.

Answer 3

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',""); 
}); 

Answer 4

Cela pourrait être un peu en retard, mais toutes les suggestions ci-dessus ne fonctionne pas pour moi, je suis venu avec une solution facile pour ce .

Tout d'abord, quel est le problème à l'origine de ce problème: JQuery attribue le datpicker à l'ID de l'élément. Si vous clonez un élément, alors le même identifiant peut également être cloné. ce que jQuery n'aime pas. Vous pourriez vous retrouver avec une erreur de référence nulle ou la date assignée au premier champ de saisie quel que soit le champ de saisie sur lequel vous cliquez.

Solution:

1) destroy datepicker 2) attribuer de nouveaux ids uniques à tous les champs d'entrée 3) assigner datepicker pour chaque entrée

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

<input type="text" name="ndate[]" id="date1" class="n1datepicker"> 

Avant de cloner, détruire datepicker

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

Une fois que vous cloner, ajoutez ces lignes ainsi

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

et la magie se produit