0

I am trying to create a date/time picker in jade/pug similar to the first example at this link: https://eonasdan.github.io/bootstrap-datetimepicker/. I am useing Node/express js server-side. When I click on the glyphicon-calendar icon the calendar does not appear. I have installed the following package: npm i bootstrap-datetimepicker-npm

So far I have tried the following code :

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')

However, this is throwing an error. I have two questions:

  1. What is wrong with the above code and how can I edit it to mimic the code at the above link.

  2. How can I save the selected date time in javascript and convert it to a Unix timestamp?

Niamh
  • 39
  • 5
  • What error is being thrown? – Sean Feb 14 '19 at 15:23
  • ambient:1 Uncaught ReferenceError: $ is not defined – Niamh Feb 14 '19 at 16:27
  • At the $ before function – Niamh Feb 14 '19 at 16:27
  • 1
    you haven't loaded jquery – Chris Hawkes Feb 14 '19 at 16:42
  • Does this line not do that : script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js') – Niamh Feb 14 '19 at 16:45
  • I have just edited the code snippet to show the entire jade file. Also, I do think it is an issue with loading the appropriate scripts. However, I still have not figured out exactly what needs to be changed. – Niamh Feb 14 '19 at 16:49
  • Possible duplicate of [Uncaught ReferenceError: $ is not defined?](https://stackoverflow.com/questions/2075337/uncaught-referenceerror-is-not-defined) – Sean Feb 14 '19 at 21:27
  • Hi @sean, it is the same error, however, I had previously tried most of the solutions listed on that post. I think because it is from 9 years ago the scripts they list to include are outdated. I can't figure out which scripts to include and think that the one I have for chart js may be interfering in some way. – Niamh Feb 15 '19 at 10:16
  • Look at the accepted answer in that post again. It's the order of the scripts. Your custom scripts must be included after you include jquery. – Sean Feb 16 '19 at 05:52

2 Answers2

1

Update:

The original 'Uncaught' Reference Error: $ Undefined" has been solved by moving the scripts to the beginning of the page, like so:

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

However, this results in a new error "jQuery.Deferred exception: $(...).datetimepicker is not a function TypeError: $(...).datetimepicker is not a function" enter image description here

Niamh
  • 39
  • 5
  • You're including scripts to dateRANGEpicker, not dateTIMEpicker. That's why datetimepicker is not a function. Please post a new question or update your original question. Answers shouldn't be used for presenting new issues. – Sean Feb 16 '19 at 05:55
  • ok no problem, I had read that it is not good practice to update questions and I mostly wanted to confirm the answer to the issue I was having. – Niamh Feb 16 '19 at 12:04
0

Even I faced the same error. I tried by declaring jquery and bootstrap at the top and then other links.

kaitlyn
  • 66
  • 1
  • 1
  • 6