ブートストラップの日付ピッカーを動的に作成する方法は？

Question

jQueryを使用して日付ピッカーを動的に作成する必要があります。私のフォームでは、日付ピッカーを作成するボタンがあります。

以下

私がこれまで試したコードです：

<div id="examDatesContainer"> 
    <div class="form-group"> 
     <label for="examDate" class="col-sm-2 caption"> 
      <fmt:message key="exam.date"/>:<strong style="font-size:14px;" class="asterisk">*</strong> 
     </label> 
     <div class="col-sm-4"> 
      <div class="input-group date"> 
       <input type="datetime" class="form-control examDate" id="examDate" name="examDate" value="" readonly > 
       <div class="input-group-addon" class="examDateCalendarIcon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
      </div> 
      <div class="help-block with-errors"></div> 
     </div> 
    </div> 

    <div class="form-group examDateTemplate" style="display: none;"> 
     <label for="examDate" class="col-sm-2 caption"></label> 
     <div class="col-sm-4"> 
      <div class="input-group date"> 
       <input type="datetime" class="form-control examDate" name="examDate" value="" readonly > 
       <div class="input-group-addon" class="examDateCalendarIcon"> 
        <i class="fa fa-calendar"></i> 
       </div> 
       <div class="input-group-addon"> 
        <i class="fa fa-minus-circle"></i> 
       </div> 
      </div> 
     </div> 
    </div> 

</div> 

<div class="form-group"> 
    <label for="examDate" class="col-sm-2 caption"> 
    </label> 
    <div class="col-sm-4"> 
     <button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary"> 
      <span class="fa fa-plus"> &nbsp;</span> 
      <fmt:message key="add"/> 
     </button> 
    </div> 
</div> 

とJavaScriptコードは以下の通りです：

$("#addExamDateBtn").click(function(){ 
    var examDateClonedObj = $(".examDateTemplate").clone(); 
    $(examDateClonedObj).removeClass("examDateTemplate"); 
    $(examDateClonedObj).appendTo("#examDatesContainer"); 
    $(examDateClonedObj).show(); 
    $('.datepicker').datetimepicker('update'); 
}); 

$('.examDate').datetimepicker({ 
    format: 'DD/MM/YYYY', 
    ignoreReadonly: true, 
    showTodayButton: true 
}); 

基本的に私が最初に、単一の日付ピッカーを示しています。次に、日付ピッカーを追加するボタンがあります。 「追加」ボタンをクリックすると、datepickerのテンプレートが非表示になります。クローンしてDOMに追加するだけです。

Answer 1

は

​​

下に動的に作成された要素ものDateTimePickerを初期化することができます。この方法は、このコードを使用してください。

作業例が掲載されています。Jsfiddle