title: How to dynamically create bootstrap datepicker?
body: <p>I need to create a date picker dynamically using jQuery. In my form I will have button to create date picker. </p>
  
  <p>Below is the code I tried so far:</p>
  
  <pre><code>&lt;div id="examDatesContainer"&gt;
      &lt;div class="form-group"&gt;
          &lt;label for="examDate" class="col-sm-2 caption"&gt;
              &lt;fmt:message key="exam.date"/&gt;:&lt;strong style="font-size:14px;" class="asterisk"&gt;*&lt;/strong&gt;
          &lt;/label&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;div class="input-group date"&gt;
                  &lt;input type="datetime" class="form-control examDate" id="examDate" name="examDate" value="" readonly &gt;
                  &lt;div class="input-group-addon" class="examDateCalendarIcon"&gt;
                      &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="help-block with-errors"&gt;&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="form-group examDateTemplate" style="display: none;"&gt;
          &lt;label for="examDate" class="col-sm-2 caption"&gt;&lt;/label&gt;
          &lt;div class="col-sm-4"&gt;
              &lt;div class="input-group date"&gt;
                  &lt;input type="datetime" class="form-control examDate" name="examDate" value="" readonly &gt;
                  &lt;div class="input-group-addon" class="examDateCalendarIcon"&gt;
                      &lt;i class="fa fa-calendar"&gt;&lt;/i&gt;
                  &lt;/div&gt;
                  &lt;div class="input-group-addon"&gt;
                      &lt;i class="fa fa-minus-circle"&gt;&lt;/i&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div class="form-group"&gt;
      &lt;label for="examDate" class="col-sm-2 caption"&gt;
      &lt;/label&gt;
      &lt;div class="col-sm-4"&gt;
          &lt;button id="addExamDateBtn" type="button" class="btn btn-sm btn-primary"&gt;
              &lt;span class="fa fa-plus"&gt; &amp;nbsp;&lt;/span&gt;
              &lt;fmt:message key="add"/&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the JavaScript code is as below:</p>
  
  <pre><code>$("#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
  });
  </code></pre>
  
  <p>Basically I show a single datepicker initially. Then I have a button to add more date pickers. Template for datepicker is hidden, on click of "add more" button I just clone it and add it to the DOM.</p>