克隆日期选择器

Question

嗯，我知道有很多关于它的帖子，但到目前为止我已经尝试了很多解决方案，但无法使其发挥作用。发生的情况是，当我克隆 div 时，使用日期选择器克隆的字段会同时更改，因此，无论我在一个字段中选择什么日期，在另一个字段中选择的日期也会发生变化。 我缺少什么，所以我可以将值重置为新值？

$(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 创建一个类和 ID，并且两者都会被克隆；两者都不应该存在于克隆中。

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

我希望这对你有用，就像对我一样。