Wie man Bootstrap Datepicker dynamisch erstellt?

Question

Ich muss eine Datumsauswahl dynamisch mit jQuery erstellen. In meinem Formular werde ich einen Button haben, um die Datumsauswahl zu erstellen.

Unten ist der Code, den ich bisher versucht:

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

und der JavaScript-Code ist wie folgt:

$("#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 
}); 

Grundsätzlich zeigen, dass ich eine zunächst einzelne Datepicker. Dann habe ich eine Schaltfläche, um weitere Datumsauswahl hinzuzufügen. Template für Datepicker ist versteckt, auf Klick auf "Add more" button Ich klicke es einfach und füge es dem DOM hinzu.

Answer 1

Verwenden Sie diesen Code unter

$('body').on('focus',".examDate", function(){ 
    $(this).datetimepicker({ 
    format: 'DD/MM/YYYY', 
    ignoreReadonly: true, 
    showTodayButton: true 
}); 
}); 

Auf diese Weise die dynamisch erzeugten Elemente auch die Datetime initialisieren.

Ein Arbeitsbeispiel wird gepostet: Jsfiddle