如何动态创建引导日期选择器？

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