Search code examples
javascriptnode.jsdatepickerpugmaterialize

Materialize datepicker not triggering ui

I'm doing a form using Jade Template and Materialize. I've been using Materialize forms elements as Select and File Input Button without a problem, but, not Date Picker.

The Date Picker element is initialized, but, when I the input is clicked nothing happens.

My folders structure:

.
|-- bower_components
|   |-- jquery
|   `-- Materialize
|-- public
|   |-- javascripts
|   |   `-- form.js
|-- views
|   |-- devices
|   |   |-- create.jade
|   |   `-- index.jade
|   |-- mixins
|   |   |-- form.jade
|   |   |-- form
|   |   |   `-- materialize.jade
|   `-- layout.jade

The route goes to create.jade, which calls layout.jade and form.jade. Inside layout.jade are called jquery.js, materialize.js and materialize.min.css before the <body> and is created a block footer-script.

The create.jade outputs the following HTML:

<div class="container">
  <div class="row">
    <form method="post" action="/devices/inserir" class="col s12" enctype="multipart/form-data">
      <div class="row">
        <h4 class="col s12">Device</h4>
        <div class="input-field col s12">
          <input type="text" name="title" id="title" class="validate"/>
          <label for="title">Title</label>
        </div>
        <div class="input-field col s12">
          <select multiple="multiple" name="platform" id="platform">
            <option value="" disabled="disabled" selected="selected">Choose a platform</option>
            <option value="PS4">Playstation 4</option>
            <option value="PC">PC</option>
          </select>
          <label for="platform">Platform</label>
        </div>

        <!-- materialize select -->
        <div class="col s12">
          <label for="birthdate">Birthdate</label>
          <input type="date" id="birthdate" class="datepicker">
        </div>


        <div class="file-field input-field col s12">
          <div class="btn">
            <span>File</span>
            <input type="file"/>
          </div>
          <div class="file-path-wrapper">
            <input type="text" name="image" class="file-path validate"/>
          </div>
        </div>
        <div class="col s12">
          <button type="submit" name="submit" class="btn waves-effect waves-light">Submit</button>
        </div>
      </div>
    </form>
  </div>
</div>

<!-- added in block footer-script -->
<script type="text/javascript" src="/javascripts/form.js"></script>

The form.js file is responsable for initialize my select and date picker fields. Here it's code:

form.js 

jQuery(document).ready(function ($) {
  $(document).ready(function() {
    $('.datepicker').pickadate({
      selectMonths: true, // Creates a dropdown to control month
      selectYears: 15 // Creates a dropdown of 15 years to control year
    });
    $('select').material_select();
  });
});

And as my printscreen shows, my form.js is called without a problem, since my select works just fine:

Materialize form

I just want to know why there is no action happening when I click the datepicker element, and how can I solve this.

For reference: Materialize forms: Date Picker

Solution

  • I've solved my problem changing the jQuery file.

    The jQuery version used in my system was jQuery v2.2.1 and the version advised to use at Materialize to date is jQuery v2.1.1.

    Minor changes in versions shouldn't make something stop working, but, this is the case right now.