duplicando o datepicker do jQuery

Question

O datepicker A função funciona apenas na primeira caixa de entrada criada.

Estou tentando duplicar um datepicker clonando o div que o contém.

<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 o selecionador de data, de acordo com o Documentação da interface do jQuery Eu só tenho que fazer $('#example').datepicker(); e funciona, mas apenas no primeiro selecionador de data criado.

O código para duplicar o div é o seguinte:

$("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();
});

O mais estranho é que no document.ready Eu tenho:

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

e se eu clicar no #txt sempre funciona.

Answer 1

Eu recomendo usar apenas um nome de classe comum também.No entanto, se você for contra isso por algum motivo, você também pode escrever uma função para criar seletores de data para todas as caixas de texto do seu modelo div (a ser chamado após cada duplicação).Algo como:

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

Answer 2

Em vez disso, uso uma classe CSS:

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

Então, em seu document.ready função:

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

Usá-lo dessa forma para vários campos do calendário funciona para mim.

Answer 3

Tive um problema muito semelhante que após horas de testes encontrei uma solução.Eu estava copiando um bloco de código HTML e inserindo-o após uma seção que já continha um calendário seletor de data jQuery.O que não percebi a princípio foi que o calendário da UI do jQuery modifica a classe do elemento ao executar o .datepicker() função.O resultado é que quando você tenta copiar o código e iniciar uma nova instância do calendário para aquela nova seção ele falha porque de acordo com o CSS já existe uma.Se você tentar usar .datepicker('destroy') isso não consegue destruir esta instância fantasma porque ela realmente não existe.Resolvi o problema redefinindo a classe do elemento selecionador de data em meu HTML e adicionando o selecionador de data a esse elemento...

Abaixo está o código que eu estava usando.Espero que isso economize algum tempo para outra pessoa ...

$('#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

O html que estou clonando possui várias entradas do selecionador de data.

Usando a resposta de Ryan Stemkoski e o comentário de Alex King, encontrei esta solução:

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');

Obrigado a todos.