title: bootstrap is not showing it's calendar
body: <p>i have used bootstrap to make a calendar and to select a ranged date from and to, but the problem is for some strange reason, the calendar is not coming. </p>
  
  <p>I have write my html and query code. But i think the script is wrong!</p>
  
  <p><strong>Html ---</strong></p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;!-- Hover Row Table --&gt;
      &lt;div class="col-lg-12"&gt;
          &lt;div class="widget-container fluid-height clearfix"&gt;
              &lt;div class="widget-content padded clearfix"&gt;
              &lt;table class="table table-hover"&gt;
      &lt;td&gt;
          &lt;div class="container"&gt;
              &lt;div class="col-sm-6" style="height:75px;"&gt;
                  &lt;div class='col-md-5'&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div&gt;Start&lt;/div&gt;
  
                          &lt;div class='input-group date' id='startDate'&gt;
                              &lt;input type='text' class="form-control" name="startDate" /&gt;
                              &lt;span class="add-on"&gt;
                                  &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;&lt;/i&gt;
                              &lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class='col-md-5'&gt;
                      &lt;div class="form-group"&gt;
                          &lt;div&gt;End&lt;/div&gt;
  
                          &lt;div class='input-group date' id='endDate'&gt;
                              &lt;input type='text' class="form-control" name="org_endDate" /&gt;
                              &lt;span class="add-on"&gt;
                                  &lt;i data-time-icon="icon-time" data-date-icon="icon-calendar"&gt;&lt;/i&gt;
                              &lt;/span&gt;                                
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/td&gt;  
  </code></pre>
  
  <p><strong>script --</strong></p>
  
  <pre><code> &lt;script&gt;
          jQuery(function () {
              jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
              jQuery('#endDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'});
              jQuery("#startDate").on("dp.change", function (e) {
                  jQuery('#endDate').data("DateTimePicker").setMinDate(e.date);
              });
              jQuery("#endDate").on("dp.change", function (e) {
                  jQuery('#startDate').data("DateTimePicker").setMaxDate(e.date);
              });
          });
      &lt;/script&gt;
  </code></pre>
  
  <p><strong>Output ---</strong>
  <a href="https://i.stack.imgur.com/ukaDn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ukaDn.png" alt="enter image description here"></a></p>
  
  <p>it should look like this ---</p>
  
  <p><a href="https://i.stack.imgur.com/iwhAK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iwhAK.png" alt="enter image description here"></a></p>
  
  <p>it shows the error ---</p>
  
  <pre><code>TypeError: jQuery(...).datetimepicker is not a function
  
  
  jQuery('#startDate').datetimepicker({format: 'dd/MM/yyyy hh:mm:ss'}); 
  </code></pre>
  
  <p>How can i fix this error, anyone knows ! 
  Thanks a lot in advanced.</p>