javascript - link - jquery pdf

duplicar jQuery datepicker

Question

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

Estoy intentando duplicar un marcador de fecha 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 datepicker, de acuerdo con la documentación jQuery UI , solo tengo que hacer $(''#example'').datepicker(); y funciona, pero solo en el primer datepicker 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 Ya tengo:

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

y si hago clic en el #txt siempre funciona.

Answer 1

El html que estoy clonando tiene múltiples entradas datepicker.

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 yall.

Answer 2

Yo uso 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 document.ready :

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

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

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 de 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 de acuerdo con el CSS ya existe una. Si intenta utilizar .datepicker(''destroy'') esto no destruye esta instancia de 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 está el código que estaba usando. Con suerte, esto le ahorra a alguien más algo de 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

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 (que se llamará después de cada duplicación). Algo como:

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