Question

我正在尝试复制我的bootstrap datepicker，但它无法正常工作。 datepicker在div中，我复制了整个div。它工作正常，但datepicker只在原始div中工作，而不是克隆的。我在stackoverflow上看到你可以放一个类而不是一个Id，但这也不起作用。

＆＃13;

$('.calendar').datepicker({
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
});

function duplicate() {
  var i = document.getElementById('duplicater');
  var d = document.createElement('div');
  d.id = "new";
  d.innerHTML = i.innerHTML;
  var p = document.getElementById('dynamicInput');
  p.appendChild(d);
}

duplicate();

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/css/bootstrap-datepicker.css" integrity="sha256-I/m6FhcACNYmRoqn1xUnizh6S7jOJsTq+aiJ6BtE2LE=" crossorigin="anonymous" />

<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.7.1/js/bootstrap-datepicker.js" integrity="sha256-7Ls/OujunW6k7kudzvNDAt82EKc/TPTfyKxIE5YkBzg=" crossorigin="anonymous"></script>

<div id="dynamicInput" class="col-md-12">
  <div id="duplicater">
    <div class="row">
      <div class="field-wrap3 col-sm-12 col-md-4">
        <input type="text" placeholder="Event Title" name="event_title[]">
      </div>
      <div class="field-wrap3 col-sm-12 col-md-4">
        <input type="text" placeholder="Background Image (URL)" name="img_url[]">
      </div>
      <div class="field-wrap3 col-sm-12 col-md-4">
        <input name="date" placeholder="Date" type="text" class="calendar" />
      </div>
    </div>
    <div class="row">
      <div class="description-create" class="col-md-8">
        <input type="text" placeholder="Description" name="description[]">
      </div>
    </div>
  </div>
</div>

＆＃13;

我不明白为什么它不起作用。我的JavaScript用类日历选择所有元素，并且＃34;给出＆＃34;它是一个日期选择器，不是吗？

Answer 1

如果我理解你的问题给你的第二个输入字段的同一个类名作为原始和初始化具有相同类名的datepicker，你不需要复制整个代码。

例如，如果你想在两个文本框中初始化datetimepicker，只需给它们命名与片段中的示例相同。



 
$( function() {
    $( ".calendar" ).datepicker();
} );
   
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<input name="date" placeholder="Date" type="text" class="calendar"/>
<input name="date1" placeholder="Date1" type="text" class="calendar"/>

Answer 2

您正在使用的操作顺序为：

html在页面上
您告诉datepicker启用.calendar
你正在复制div，它创建了前一个调用没有知道的html，所以没有任何附加内容

副本正在制作html的副本，它没有创建datepicker的新实例。如果您在副本的末尾拨打了$('.calendar').datepicker('destroy');，则可以通过现有的电话号码跟踪：

$('.calendar').datepicker({
  format: 'dd/mm/yyyy',
  todayHighlight: true,
  autoclose: true,
});

会产生以下效果：

html在页面上
datepicker附加到.calendar
重复被调用
- 重复复制html
- 并删除.calendar
- 然后重新附加以确保它获得日历的原始实例和新实例

或者，您可以调整附加datepicker的调用范围，以便仅将其附加到新创建的html。

使用JavaScript克隆bootstrap datepicker

2 个答案: