物化日期选择器不触发ui答案

【问题标题】：Materialize datepicker not triggering ui物化日期选择器不触发ui
【发布时间】：2016-03-29 15:48:45
【问题描述】：

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

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

我的文件夹结构：

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

【问题讨论】：

标签： javascript node.js datepicker pug materialize

【解决方案1】：

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

在我的系统中使用的 jQuery 版本是 jQuery v2.2.1，迄今为止在 Materialise 上建议使用的版本是 jQuery v2.1.1。

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

【讨论】：