duplicazione del datepicker jQuery

Question

IL datepicker la funzione funziona solo sulla prima casella di input creata.

Sto cercando di duplicare un datepicker clonando il file div che 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>

Per inizializzare il datepicker, secondo il file Documentazione dell'interfaccia utente jQuery devo solo fare $('#example').datepicker(); e funziona, ma solo sul primo datepicker creato.

Il codice per duplicare il file div è il seguente:

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

La cosa più strana è che sul document.ready Io ho:

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

e se clicco su #txt funziona sempre.

Answer 1

Consiglierei anche solo di usare un nome di classe comune.Tuttavia, se per qualche motivo non sei d'accordo, potresti anche scrivere una funzione per creare selettori di date per tutte le caselle di testo nel tuo modello div (da richiamare dopo ogni duplicazione).Qualcosa di simile a:

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

Answer 2

Io utilizzo invece una classe CSS:

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

Poi, nel tuo document.ready funzione:

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

Usarlo in questo modo per più campi del calendario funziona per me.

Answer 3

Ho avuto un problema molto simile al quale dopo ore di test ho trovato una soluzione.Stavo copiando un blocco di codice HTML e inserendolo dopo una sezione che conteneva già un calendario di selezione data jQuery.Ciò che all'inizio non ero riuscito a realizzare era che il calendario dell'interfaccia utente jQuery modifica la classe dell'elemento durante l'esecuzione del file .datepicker() funzione.Il risultato è che quando provi a copiare il codice e ad avviare una nuova istanza del calendario per quella nuova sezione fallisce perché secondo il CSS ce n'è già una.Se provi a utilizzare .datepicker('destroy') questo non riesce a distruggere questa istanza fantasma perché in realtà non esiste.Ho risolto il problema reimpostando la classe dell'elemento di selezione della data nel mio HTML, quindi aggiungendo il datepicker a quell'elemento...

Di seguito è riportato il codice che stavo utilizzando.Spero che questo faccia risparmiare tempo a qualcun altro...

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

L'HTML che sto clonando ha più input di datepicker.

Usando la risposta di Ryan Stemkoski e il commento di Alex King, ho trovato questa soluzione:

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

Grazie a tutti.