«Uncaught ReferenceError: $ не определено» - при использовании выбора даты и времени в Jade / Pug - PullRequest
Новая
       26

«Uncaught ReferenceError: $ не определено» - при использовании выбора даты и времени в Jade / Pug

0 голосов
/ 14 февраля 2019

Я пытаюсь создать средство выбора даты / времени в jade / pug, как в первом примере по этой ссылке: https://eonasdan.github.io/bootstrap-datetimepicker/. Я использую Node / express js на стороне сервера.Когда я нажимаю на значок глификон-календаря, календарь не появляется.Я установил следующий пакет: npm i bootstrap-datetimepicker-npm

До сих пор я пробовал следующий код: 

block console_content

  .sensor-page(ng-controller="ambientCtrl")
    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='datetimepicker1')
              input(type='text' class="form-control")
              span(class="input-group-addon")
                span.glyphicon.glyphicon-calendar
        script(type="text/javascript").
            $( document ).ready(function () {$('#datetimepicker1').datetimepicker()});

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

    script(src='https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.min.js')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css')
    link(rel='stylesheet', href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css')
    link(rel='stylesheet', href='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js')
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js')
    script(src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js')

Однако выдается ошибка.У меня два вопроса:

  1. Что не так с приведенным выше кодом и как я могу отредактировать его, чтобы имитировать код по вышеуказанной ссылке.

  2. Как сохранить выбранное время даты в javascript и преобразовать его в метку времени Unix?

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

Даже я сталкивался с такой же ошибкой.Я попытался объявить jquery и bootstrap вверху, а затем и другие ссылки.

0 голосов
/ 15 февраля 2019

Обновление:

Исходная ошибка ссылки «Uncaught»: $ Undefined »была решена путем перемещения сценариев в начало страницы, например: 

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://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='datetimepicker1')
              input(type='text' class="form-control")
              span(class="input-group-addon")
                span.glyphicon.glyphicon-calendar
        script(type="text/javascript").
          $( document ).ready(function () {$('#datetimepicker1').datetimepicker()});


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

Однако это приводит к новой ошибке "Исключение jQuery.Deferred: $ (...). Datetimepicker не является функцией TypeError: $ (...).datetimepicker не является функцией " введите описание изображения здесь

...