克隆的日期选择器输入不起作用答案

【问题标题】：cloned datepicker input not working克隆的日期选择器输入不起作用
【发布时间】：2018-03-01 08:28:45
【问题描述】：

我有一个如下的日期选择器输入（jquery UI）

<div class="row more-info-1">
<input class="pi-datepicker" type="text">
</div>

<a href="javascript:void(0)" onclick="addMoreDetails(1)">Add More</a>

我需要多次克隆这个输入，所以我的 javascript 是：

$('.pi-datepicker').datepicker({ dateFormat: 'dd-mm-yy' });
function addMoreDetails(nit_quotation_id) {
    $latest_div     = $('.more-info-'+nit_quotation_id+':last');  

    $latest_div.datepicker('destroy').removeAttr('id')

    $clone          = $latest_div.clone(false);

    $latest_div.after($clone);
    $clone.find('input.pi-datepicker')
      .removeClass('hasDatepicker')
      .removeData('datepicker')
      .unbind()
      .datepicker({ dateFormat: 'dd-mm-yy' });
}

但是当我点击克隆的输入时，会出现日期选择器屏幕，但第一个输入框中的值发生了变化。请查看FIDDLE

【问题讨论】：

标签： jquery jquery-ui datepicker clone

【解决方案1】：

这是因为您的输入控件具有相同的 ID (dd_date)。每次单击“添加更多”时更新您的输入控件 ID，如下所示。

$clone.find('input.pi-datepicker')
  .removeClass('hasDatepicker')
  .removeData('datepicker')
  .attr('id', 'dd_date' + Math.random()) //newly added line
  .unbind()
  .datepicker({ dateFormat: 'dd-mm-yy' });

Updated Fiddle DEMO

【讨论】：