duplicando jQuery datepicker

Question

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

Estoy intentando duplicar un selector de fechas clonando el div eso es contenerlo.

<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 fecha, de acuerdo con el documentación de la interfaz de usuario de jQuery solo 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 el 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

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

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

Answer 2

Yo uso una clase CSS en su lugar:

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

Entonces, en tu document.ready función:

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

Usarlo de esa manera para múltiples campos del calendario me funciona.

Answer 3

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

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

$('#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 múltiples entradas de selector de fecha.

Usando la respuesta de Ryan Stemkoski y el comentario de Alex King, se me ocurrió 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 a todos.