JavaScriptを使用したブートストラップ日付ピッカーのクローズ

Question

ブートストラップのdatepickerを複製しようとしていますが、正しく動作しません。 datepickerはdiv内にあり、div全体を複製します。それは正常に動作しますが、datepickerはクローンされたものではなく元のdivでのみ動作しています。 私は、IDの代わりにクラスを置くことができますが、それも動作していないstackoverflowを見てきました。

$('.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();

<!-- 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>

それは働いていない理由を私は得ることはありません。私のJavaScriptは、クラスカレンダーを持つすべての要素を選択し、それにdatepickerを "与え"ますか？

Answer 1

2番目の入力フィールドの同じクラス名をオリジナルと同じクラス名にし、同じクラス名のdatepickerを初期化する場合、コード全体を複製する必要はありません。

たとえば、datetimepickerを2つのテキストボックスに初期化する場合は、スニペットの後の例と同じ名前を付けます。

             
  
 
   
 
    

 
$(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は、あなたがdiv要素をコピーしている.calendar
• の既存のインスタンスを有効にするには、日付ピッカーを語っているページ
• であります前の呼び出しが知らなかったhtmlを作成するので、何も付かない。

コピーはhtmlのコピーを作成していますが、datepickerの新しいインスタンスを作成していません。 HTMLは

日付ピッカーが接続されているページにある

：の効果を持っているでしょう

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

：あなたのコピーの終わりに、あなたがするために、既存の呼び出しによって、ということにはでき$('.calendar').datepicker('destroy');と呼ばれる場合

• 重複警官
  と呼ばれる .calendar
  • 重複のすべての既存のインスタンスにHTML
  • をIESと.calendar
  • のすべてのインスタンスを削除し、あなたが日付ピッカーを取り付けるためのスコープあなたのコールを交互に確認してください、それが元とカレンダー

の新しいインスタンスを取得するために可能性が再接続新しく作成されたhtmlにのみ添付するようにします。