实现日期选择器未触发 ui

Question

我正在使用 Jade Template 和 Materialize 制作表单。我一直在使用 Materialize 表单元素作为 Select 和文件输入按钮没有问题，但是，不是日期选择器。

日期选取器元素已初始化，但是，当我单击输入时，没有任何反应。

我的文件夹结构：

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

路线前往 create.jade，它调用 layout.jade 和 form.jade。在 layout.jade 中，在 <body> 之前调用了 jquery.js、materialize.js 和 materialize.min.css，并创建了一个 block footer-script .

create.jade输出如下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>

form.js 文件负责初始化我的 select 和 date picker 字段。这是代码：

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();
  });
});

正如我的打印屏幕所示，我的 form.js 被调用没有问题，因为我的 select 工作正常：

我想知道为什么点击日期选择器元素没有动作，如何解决。

供参考：Materialize forms: Date Picker

Answer 1

我已经解决了更改 jQuery 文件的问题。

我的系统中使用的 jQuery 版本是 jQuery v2.2.1，目前 Materialise 建议使用的版本是 jQuery v2.1.1.

版本中的微小变化不应该让某些东西停止工作，但是，现在就是这种情况。

实现日期选择器未触发 ui

Materialize datepicker not triggering ui

javascript

datepicker

node.js

materialize

pug