duplicar jQuery datepicker

Question

La función datepicker solo funciona en el primer cuadro de entrada que se crea.

Estoy tratando de duplicar un datepicker clonando el div que lo contiene.

<a href="#" id="dupMe">click</a> 
<div id="template"> 
    input-text <input type="text" value="text1" id="txt" /> 
    date time picker <input type="text" id="example" value="(add date)" /> 
</div> 

Para inicializar el selector de fechas, de acuerdo con el jQuery UI documentation sólo tengo que hacer $('#example').datepicker(); y funciona, pero sólo en el primer selector de fecha que se crea.

El código para duplicar el div es la siguiente:

$("a#dupMe").click(function(event){ 
    event.preventDefault(); 
    i++; 
    var a = $("#template") 
      .clone(true) 
      .insertBefore("#template") 
      .hide() 
      .fadeIn(1000); 
    a.find("input#txt").attr('value', i); 
    a.find("input#example").datepicker(); 
}); 

Lo más extraño es que en el document.ready tengo:

$('#template #example').datepicker(); 
$("#template #txt").click(function() { alert($(this).val()); }); 

y si hago clic en el #txt siempre funciona.

Answer 1

Yo recomendaría simplemente usar un nombre de clase común también. Sin embargo, si está en contra de esto por alguna razón, también puede escribir una función para crear selectores de fecha para todos los cuadros de texto en su plantilla div (se llamará después de cada duplicación). Algo como:

function makeDatePickers() { 
    $("#template input[type=text]").datepicker(); 
} 

Answer 2

utilizo una clase CSS en su lugar:

<input type="text" id="BeginDate" class="calendar" /> 
<input type="text" id="EndDate" class="calendar" /> 

Luego, en su función de document.ready:

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

Usando esa manera para múltiples campos de calendario que funciona para mí.

Answer 3

Tuve un problema muy similar que después de horas de prueba encontré una solución. Estaba copiando un bloque de código HTML e insertándolo después de una sección que ya contenía un calendario selector de fechas jQuery. Lo que no me di cuenta al principio fue que el calendario jQuery UI modifica la clase del elemento al ejecutar la función .datepicker(). El resultado es cuando intentas copiar el código e iniciar una nueva instancia del calendario para esa nueva sección que falla porque según el CSS ya existe una. Si intentas usar .datepicker('destroy'), esto no destruye esta instancia fantasma porque en realidad no existe. Resolví el problema al restablecer la clase del elemento selector de fecha en mi HTML y luego agregué el datepicker a ese elemento ...

A continuación se muestra el código que estaba usando. Esperemos que esto le ahorre a alguien más un tiempo ...

$('#addaddress').click(function() { 
    var count = $('.address_template').size(); 
    var html = $('.address_template').eq(0).html(); 
    $('#addaddress').before('<div class="address_template">' + html + '</div>'); 
    $('.address_template H1').eq(count).html("Previous Address " + count); 
    $('.address_date').eq(count).attr("class","address_date"); 
    $('.address_date').eq(count).attr("id","movein" + count); 
    $("#movein" + count).datepicker(); 
}); 

Answer 4

El html que estoy clonando tiene varias entradas datepicker.

Usando la respuesta de Ryan Stemkoski y el comentario de Alex King, me ocurrió con esta solución:

var clonedObject = this.el.find('.jLo:last-child') 
clonedObject.find('input.ui-datepicker').each(function(index, element) { 
    $(element).removeClass('hasDatepicker'); 
    $(element).datepicker(); 
}); 
clonedObject.appendTo('.jLo'); 

Gracias yall.