Клонирование DatePicker

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

jQuery создает класс и ID, и оба клонируются;ни один не должен быть там в клоне.

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

Я надеюсь, что это работает для вас, как и для меня.

Answer 2

Почему вы хотите клонировать datePicker?

Создание другого datePicker с самого начала, скрытие его при необходимости и изменение его значения при изменении значения первого datePicker не будут выполнять работу?

Дело в том, что datePicker больше не является единственным DOM-объектом после применения плагина.Таким образом, клонирование исходного элемента DOM, даже со всеми его данными datePicker, не создаст подобный объект.

Другим решением было бы вместо клонирования исходного datePicker создать новый элемент INPUT, применяя к нему datePicker,затем снова присвоив ему значение первого DatePicker.