クローニングdatepicker

Question

まあ、私はそれについて多くの記事があることを知っていますが、私はこれまで多くの解決策を試したが、それを動作させることができませんでした。何が起こるのは、私がdivをクローンすると、datepickerでクローン化されたフィールドが同時に変更されるため、あるフィールドで選択した日付が他のフィールドにも表示されても問題ありません。 何が不足しているので、値を新しいものにリセットできますか？

$(document).ready(function() { 
$('#btnAdd').click(function() { 

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

var num = $('.clonedInput').length; 
var newNum = new Number(num + 1); 
var newElem = $('#input' + num).clone().attr('id', 'input' + newNum); 

newElem.find('#label_val_ini label').attr('for', 'val_ini' + newNum); 
newElem.find('#input_val_ini input').attr('class', 'calendario' + newNum).attr('name', 'val_ini[]' + newNum).val(''); 
newElem.find('#input_val_ini input').attr('class', 'calendario' + newNum).attr('class', 'calendario' + newNum).val(''); 


newElem.find('#label_val_fim label').attr('for', 'val_fim' + newNum); 
newElem.find('#input_val_fim input').attr('class', 'calendario' + newNum).attr('name', 'val_fim[]' + newNum).val(''); 
newElem.find('#input_val_fim input').attr('class', 'calendario' + newNum).attr('class', 'calendario' + newNum).val(''); 
$('#input' + num).after(newElem); 
$('#btnDel').attr('disabled',false); 
if (newNum == 50) 
$('#btnAdd').attr('disabled',true); 
$('.datepicker').datepicker(); 
}); 
$('#btnDel').click(function() { 
var num = $('.clonedInput').length; 
$('#input' + num).remove();  
$('#btnAdd').attr('disabled',false); 
if (num-1 == 1) 
$('#btnDel').attr('disabled',true); 
}); 
$('#btnDel').attr('disabled',true); 
}); 

<form action="inclui_pacote.php" method="post" id="sign-up_area"> 
<div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
<table> 
<tr> 
<td width="90"><label for="val_ini">Início de validade:</label></td> 
<td width="144"><input name="val_ini[]" type="text" class="datepicker" tabindex="1" value="" size="10" maxlength="10" id="input_val_ini"/></td> 

<td width="90"><label for="val_fim">Fim da validade:</label></td> 
<td width="144"><input name="val_fim[]" type="text" class="datepicker" tabindex="1" value="" size="10" maxlength="10" id="input_val_fim"/></td> 
</tr> 
</table> 
</div> 
    <input type="button" id="btnAdd" value="+ Hotel" /> 
    <input type="button" id="btnDel" value="- Hotel"/> 
    <input name="cadastrar" type="submit" value="Cadastrar"> 
    </form> 

Answer 1

なぜdatePickerを複製したいですか？

最初から他のdatePickerを作成し、必要に応じて非表示にし、最初のdatePickerの値が変更されたときにその値を変更すると、そのジョブは実行されません。

プラグインが適用されると、datePickerは単一のDOMオブジェクトではなくなりました。オリジナルのDOM要素を複製するには、datePickerのすべてのデータでも同様にオブジェクトが作成されるわけではありません。

元のdatePickerを複製して新しいINPUT要素を作成し、その上にdatePickerを適用し、最初のDatePickerの値を再度与える代わりに、別の解決策があります。

Answer 2

jQueryは、クラスとの両方を作成し、どちらもクローン化されます。クローンにはそこにはいけません。

$('.calendar:last').removeClass('hasDatepicker').attr('id',"").datepicker(); 

私の場合と同じように、これがうまくいくことを願っています。