Clone jQuery Eingabe Datum Picker Element

Question

Ich benutze die jQuery Datumsauswahl und ich möchte das Eingabeelement klonen. Der jQuery-Code scheint beim Klonen und statischen Element gut zu funktionieren, aber nicht mit der Datumsauswahl. Unten ist der Code:

$(function(){ 
    var $button = $('.datepicker-input--checkin').clone(); 
    $('.package').html($button); 
}); 

$(function(){  
    $('#thedate').datepicker({ 
     dateFormat: 'dd-mm-yy', 
     altField: '#thealtdate', 
     altFormat: 'yy-mm-dd' 
    }); 
}); 

gezeigt Field:

<input id="thedate" type="text" class="datepicker-input--checkin" /><br /> 

Verstecktes Feld:

<input id="thealtdate" type="text" class="datepicker-input--checkin" /><br /> 
<input id="thesubmit" type="button" value="Submit" /> 

<div class="package"> 
</div> 

Fiddle:

Answer 1

die Eingabe Nach dem Klonen, müssen Sie die Datumsauswahl wieder initialisieren auf dem Eingang.

Sie könnten das tun, indem Sie eine Klasse datepicker am Eingang Zugabe sollte die Datumsauswahl zu haben, und dann die Datepicker Initialisierung (nach Klonen) mit:

$(".package .datepicker").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    altField: '#thealtdate', 
    altFormat: 'yy-mm-dd' 
}); 

Hier ist die aktualisierte Geige: https://jsfiddle.net/txqepe36/3/

Sie können den Code noch weiter vereinfachen, indem Sie die Initialisierung des Datumsspeichers durch die Element-ID entfernen, da Sie an beiden Eingängen wahrscheinlich eine Klasse datepicker mit einer Datumsauswahlsteuerung haben.

Ihr JS-Code könnte vereinfacht werden:

$(function() { 
    var $button = $('.datepicker-input--checkin').clone(); 
    $('.package').html($button); 

    $(".datepicker").datepicker({ 
    dateFormat: 'dd-mm-yy', 
    altField: '#thealtdate', 
    altFormat: 'yy-mm-dd' 
    }); 
}); 

Beachten Sie, dass Sie benötigen würde eine datepicker Klasse mit dem Eingang hinzuzufügen. So sollte es aussehen:

<input id="thedate" type="text" class="datepicker-input--checkin datepicker" /> 

Hier ist die Geige: https://jsfiddle.net/txqepe36/4/