Clonazione di oggetti DatePicker [JQuery]

Question

Ho un campo di input che definisco come datepicker attraverso una classe css. Ora voglio clonare questo campo di input e farlo in modo che gli input clonati siano anche datepicker.

Dopo aver letto da varie fonti, sono stato indotto a credere che il seguente codice dovrebbe funzionare ma non lo è. Speravo forse qualcuno potrebbe aiutarmi a capire quello che stavo facendo male :)

<input type="text" id="date" name="date" class="calendar" /> 
<input type="button" id="clone" name="clone" value="Clone dates" /> 

Ed ecco il javascript:

<script type="text/javascript"> 
$(document).ready(function(){ 

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

$('#clone').click(function() 
{ 
    $('.calendar:last').clone().append().insertAfter('.calendar:last'); 
}); 

}); 

</script> 

Finora il campo di input viene duplicato e viene inserito dopo l'ultimo istanza ma il datepicker non funziona. Ho provato a passare 'true' alla funzione clone ma mi ha dato un errore dicendo che inst non era definito.

Qualsiasi aiuto sarebbe apprezzato :)

Answer 1

Change a questo:

$('.calendar:last').clone(false).removeClass('hasDatepicker').insertAfter('.calendar:last').datepicker(); 

Answer 2

al male non posso commentare più sulla risposta di cui sopra, ma il codice Fales ancora! Datepicker si presenta all'elemento di input clonato, ma usa il valore di data selezionato nel campo di input originale e lascia vuoto il campo di input clonato. Qualche suggerimento?

edit:

utilizzando il seguente codice ha risolto il tutto per me ..

$('.datum',clone).removeClass("hasDatepicker").attr('id',"").datepicker(); 

(notare che ho clonato un involucro, e sono soltanto rivolte al campo di immissione 'dato' in quel involucro)

Dopo aver rimosso la classe come suggerito sopra, rimuovo anche l'id dell'elemento di input clonato. È lo stesso dell'originale, ecco perché stavo aggiornando il campo di input originale con la data selezionata nella casella datepicker.

Answer 3

Ho apportato le seguenti modifiche e funziona.

Prima:

$('#clone').click(function() 
{ 
    $('.calendar:last').clone().append().insertAfter('.calendar:last'); 
}); 

Dopo:

$('#clone').click(function() 
{ 
    $('.calendar:last').clone().append().insertAfter('.calendar:last').attr('id',""); 
}); 

Answer 4

Questo potrebbe essere un po 'in ritardo, ma tutti i suggerimenti di cui sopra non ha funzionato per me, mi si avvicinò con una soluzione facile per questo .

Innanzitutto, qual è il problema che causa il problema: JQuery assegna il datapicker all'ID elemento. se sei un elemento di clonazione, allora anche lo stesso id potrebbe essere clonato. a cui jQuery non piace. Si potrebbe finire con la ricezione di un errore di riferimento nullo o con la data assegnata al primo campo di input indipendentemente dal campo di input su cui si fa clic.

Soluzione:

1) distruggere datepicker 2) assegnare nuovi ID univoci a tutto campo di input 3) assegnare datepicker per ogni ingresso

Assicuratevi che il vostro ingresso è qualcosa di simile

<input type="text" name="ndate[]" id="date1" class="n1datepicker"> 

Prima di clonare, distruggi datepicker

$('.n1datepicker').datepicker('destroy'); 

Dopo aver clonare, aggiungere queste righe così

var i = 0; 
$('.n1datepicker').each(function() { 
    $(this).attr("id",'date' + i).datepicker(); 
    i++; 
}); 

e la magia accade