title: daterangepicker is not a function javascript
body: <p>I got an error when trying to create daterangepicker, I did exactly as instructed on <a href="https://www.daterangepicker.com" rel="nofollow noreferrer">https://www.daterangepicker.com</a>, but it didn't work. What this erro? How to fix this erro? I have just started learning js recently, please can you give me a detailed guide. Thanks</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" /&gt;
  &lt;link href="static/html/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;link href="static/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.css" rel="stylesheet"&gt;
  &lt;link href="static/html/css/animate.css" rel="stylesheet"&gt;
  &lt;link href="static/html/css/style.css" rel="stylesheet"&gt;
  &lt;link href="static/html/css/colors/default.css" id="theme" rel="stylesheet"&gt;
  &lt;script type="text/javascript" src="http://cdn.jsdelivr.net/jquery/latest/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://cdn.jsdelivr.net/momentjs/latest/moment.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="http://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      $(function() {
          $('input[name="date_times"]').daterangepicker({
          timePicker: true,
          startDate: moment().startOf('hour'),
          endDate: moment().startOf('hour').add(32, 'hour'),
          locale: {
              format: 'MM/DD/YYYY HH:mm'
          }
          });
      });
  &lt;/script&gt;
  &lt;script&gt;
      function submitDate() {
          document.getElementById("frm1").submit();
  }
  &lt;/script&gt;
  &lt;style&gt;
      div.set_height {
      height: 100px;
      }
  &lt;/style&gt;   
  &lt;/head&gt; 
  &lt;body class="fix-header"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm-12"&gt;
          &lt;div class="col-sm-7 white-box set_height"&gt;
              &lt;h3 class="box-title"&gt;Historical Table&lt;/h3&gt;
              &lt;p class="text-muted"&gt; Data will be saved every 30 minutes&lt;/p&gt;
          &lt;/div&gt;
          &lt;div class="col-sm-5 white-box set_height"&gt;
              &lt;form id="frm1" method=POST action="{{ url_for('get_history') }}"&gt;
                  &lt;h3 class="box-title"&gt; Filter :
                      &lt;input type="text" placeholder="M/D/Y H:m - M/D/Y H:m" name="date_times"/&gt;
                      &lt;button type="submit" onclick="submitDate()" style=background-color:#e7e7e7;color:blue;&gt;Submit&lt;/button&gt;
                  &lt;/h3&gt;
              &lt;/form&gt;
              &lt;p class="text-muted"&gt;Select date and time&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;footer class="footer text-center"&gt; © Dashboard Pepple Counting &lt;/footer&gt;
  
  &lt;script src="static/plugins/bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/html/bootstrap/dist/js/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/plugins/bower_components/sidebar-nav/dist/sidebar-nav.min.js"&gt;&lt;/script&gt;
  &lt;script src="static/html/js/jquery.slimscroll.js"&gt;&lt;/script&gt;
  &lt;script src="static/html/js/waves.js"&gt;&lt;/script&gt;
  &lt;script src="static/html/js/custom.min.js"&gt;&lt;/script&gt;  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>