Cloning datepicker Objekte [JQuery]

Question

Ich habe ein Eingabefeld, das ich als datepicker durch eine CSS-Klasse definieren. Ich möchte nun dieses Eingabefeld klonen und habe es so, dass die geklonten Eingaben auch Datepicker sind.

Nach dem Lesen aus verschiedenen Quellen wurde ich zu der Überzeugung geführt, dass der folgende Code funktionieren sollte, aber es nicht funktioniert. Ich hatte gehofft, vielleicht könnte jemand mir helfen, herauszufinden, was ich falsch mache :)

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

Und hier ist das javascript:

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

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

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

}); 

</script> 

Bisher wird das Eingabefeld kopiert und eingefügt wird an nach dem letzten Instanz, aber der Datepicker funktioniert nicht. Ich habe versucht, die Klon-Funktion "wahr" zu übergeben, aber es gab mir einen Fehler, der besagt, dass inst nicht definiert wurde.

Jede Hilfe wäre :)

Answer 1

ändert es so verstanden werden:

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

Answer 2

zu schlecht, dass ich oben nicht mehr auf der Antwort kommentieren, aber der Code Fales noch! Der Datepicker wird am geklonten Eingabeelement angezeigt, verwendet jedoch den ausgewählten Datumswert im ursprünglichen Eingabefeld und lässt das geklonte Eingabefeld leer. Alle Vorschläge?

edit:

mit dem folgenden Code, um es für mich festgelegt ..

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

(beachten Sie, dass ich einen Wrapper geklont, und nur am Targeting des 'Datum' Eingabefeldes in diesem Wrapper)

Nach dem Entfernen der Klasse wie oben vorgeschlagen, ich auch ID des geklonten Eingabeelements entfernen. Es ist das gleiche wie das Original, deshalb habe ich das ursprüngliche Eingabefeld mit dem ausgewählten Datum in der Datepicker-Box aktualisiert.

Answer 3

Ich habe die folgenden Änderungen vorgenommen und es funktioniert.

Vorher:

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

Nach:

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

Answer 4

Dies könnte ein wenig zu spät sein, aber alle oben genannten Vorschläge nicht für mich arbeiten, kam ich für diese mit einer einfachen Lösung bis .

Zuerst, was das Problem verursacht: JQuery zuweisen datepicker Element-ID. Wenn Sie ein Element klonen, kann dieselbe ID auch geklont werden. was jQuery nicht mag. Möglicherweise erhalten Sie entweder den Null-Referenzfehler oder das dem ersten Eingabefeld zugewiesene Datum, unabhängig davon, auf welches Eingabefeld Sie klicken.

Lösung:

1) zerstören picker 2) zuweisen neue eindeutige IDs für alle Eingabefeld 3) zuweisen picker für jeden Eingang

Stellen Sie sicher, Ihre Eingabe so etwas wie dieses ist

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

Bevor du klonst, zerstöre datepicker

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

Nachdem Sie klonen, fügen Sie diese Zeilen als auch

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

und die Magie passiert