如何動態創建引導日期選擇器？

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