正确的导入jQuery脚本的方法，可以避免：“未捕获的TypeError：$（…）.daterangepicker不是函数”

Question

我收到以下错误：未捕获的TypeError：$（…）.daterangepicker不是函数

当尝试使用jade / pug模板引擎为节点js应用程序实现日期范围选择器时。因此，当我将鼠标悬停在日历glyphicon上时，日历不会出现。

我知道这很可能是由于导入jQuery库脚本的方法所致。我已经尝试了多种解决方案（例如Uncaught TypeError: $(...).daterangepicker is not a function），但无法找出正确的导入方式。如何导入jQuery以避免出现此问题？

block console_content

  .sensor-page(ng-controller="ambientCtrl")
    script(src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.bundle.min.js")
    script(type='text/javascript', src='https://cdn.jsdelivr.net/jquery/latest/jquery.min.js')
    script(type='text/javascript', src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/momentjs/latest/moment.min.js')
    script(type='text/javascript', src='https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js')
    link(rel='stylesheet', type='text/css', href='https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css')



    h1 Sensors


    // Date-Time Widget
    div(class="container")
      div(class="row")
        div(class="col-sm-6")
          div(class="form-group")
            div(class='input-group date' id='daterangepicker1')
              input(type='text' class="form-control")
              span(class="input-group-addon")
                span.glyphicon.glyphicon-calendar
        script(type="text/javascript").
          $( document ).ready(function () {$('#daterangepicker1').daterangepicker()});


    // Sensor Checkbox Widget
    p {{selection}}
    label(ng-repeat='sensorName in sensors')
      input(type='checkbox', name='selectedSenors[]', value='{{sensorName}}', ng-checked='selection.indexOf(sensorName) > -1', ng-click='toggleSelection(sensorName)')
      |  {{sensorName}}

    button(ng-click="changeSensors()") Show


    canvas(id="myChart")


    h1 Sensor
    p Info about sensors here