实现日期选择器不会触发用户界面
[英]Materialize datepicker not triggering ui
问题描述
I'm doing a form using Jade Template and Materialize. 
我正在使用Jade Template和Materialize进行表单。 I've been using Materialize forms elements as Select and File Input Button without a problem, but, not Date Picker. 我一直在使用Materialize表单元素作为“选择”和“文件输入按钮”，但没有出现问题，但没有使用Date Picker。
The Date Picker element is initialized, but, when I the input is clicked nothing happens. Date Picker元素已初始化，但是，当我单击输入时，什么也没有发生。
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 . 路由到达create.jade ，后者调用layout.jade和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 . 在layout.jade内部，在<body>之前称为jquery.js ， materialize.js和materialize.min.css ，并创建了一个块页脚脚本 。
The create.jade outputs the following HTML: 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>
The form.js file is responsable for initialize my select and date picker fields. form.js文件负责初始化我的select和date picker字段。 Here it's code: 这是代码：
form.js 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: 正如我的form.js所示，我的form.js调用没有问题，因为我的select效果很好：
I just want to know why there is no action happening when I click the datepicker element, and how can I solve this. 我只想知道为什么当我单击datepicker元素时为什么没有动作，以及如何解决这个问题。
For reference: Materialize forms: Date Picker 供参考： 物化表格：日期选择器
1 个解决方案
解决方案1
0 已采纳 2016-03-30 15:15:03
I've solved my problem changing the jQuery file. 我已经解决了更改jQuery文件的问题。
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 . 在我的系统中使用的jQuery版本是jQuery v2.2.1 ，到目前为止建议在Materialize中使用的版本是jQuery v2.1.1 。
Minor changes in versions shouldn't make something stop working, but, this is the case right now. 版本的微小更改不应使某些功能停止工作，但是，现在就是这种情况。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.