Clonar objetos datepicker [JQuery]

Question

Tengo un campo de entrada que defino como un datepicker a través de una clase css. Ahora quiero clonar este campo de entrada y tenerlo para que las entradas clonadas también sean datapickers.

Después de leer de varias fuentes me hicieron creer que el siguiente código debería funcionar pero no es así. Tenía la esperanza de que tal vez alguien podría ayudarme a averiguar lo que estaba haciendo mal :)

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

Y aquí está la javascript:

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

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

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

}); 

</script> 

Hasta ahora el campo de entrada se duplica y se inserta en el después de la última instancia pero el datepicker no funciona. Intenté pasar 'verdadero' a la función de clonación pero me dio un error al decir que inst no estaba definido.

Cualquier ayuda se agradece :)

Answer 1

Cambio a esto:

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

Answer 2

a mal que no puedo comentar más en la respuesta anterior, pero el código todavía FALES! El dactilógrafo aparece en el elemento de entrada clonado, pero usa el valor de fecha seleccionado en el campo de entrada original y deja en blanco el campo de entrada clonado. ¿Alguna sugerencia?

edición:

Usando el siguiente código fijado para mí ..

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

(tenga en cuenta que he clonado un envoltorio, y sólo estoy apuntando el campo de entrada 'dato' en ese envoltorio)

Después de eliminar la clase como se sugirió anteriormente, también elimino la identificación del elemento de entrada clonado. Es lo mismo que el original, por eso estaba actualizando el campo de entrada original con la fecha seleccionada en el cuadro de selección de fecha.

Answer 3

Realicé los siguientes cambios y funciona.

Antes:

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

Después:

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

Answer 4

Esto podría ser un poco tarde, pero todas las sugerencias anteriores no funcionó para mí, se me ocurrió una solución fácil para este .

Primero, cuál es la causa del problema: JQuery asigna datepicker al elemento id. si está clonando un elemento, también se puede clonar el mismo id. que a jQuery no le gusta Puede terminar recibiendo el error de referencia nulo o la fecha asignada al primer campo de entrada, sin importar en qué campo de entrada haga clic.

Solución:

1) destruir selector de fechas 2) asignar nuevos identificadores únicos a todos los campos de entrada 3) asignar selector de fechas para cada entrada

Asegúrese de que su entrada es algo como esto

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

Antes de clonar, destruir selector de fechas

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

Después de clonar, añadir estas líneas, así

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

y la magia sucede