Materializecss 日期选择器不工作答案

【问题标题】：Materializecss datepicker not workingMaterializecss 日期选择器不工作
【发布时间】：2016-06-27 15:22:21
【问题描述】：

我第一次在我的网络应用程序中使用materializecss，并且我正在努力使用 datepicker。它根本不起作用。

我导入materialize.css和js文件并使用代码

<div>
 <input type="date"  class="datepicker" />
</div>

并添加了脚本代码

 $(document).ready(function() {
    $('select').material_select();


    window.picker = $('.datepicker').pickadate({

        selectYears: 16, // Creates a dropdown of 15 years to control year
        format: 'yyyy-mm-dd'
    });



});

但没有任何效果，它显示了一个禁用的文本框。

我也想知道如何在materializecss添加timepicker？

【问题讨论】：

标签： datepicker material-design materialize

【解决方案1】：

我遇到了同样的问题。将 jquery 降级到 2.1.4 解决了我的问题。看来，由于某种原因 datetimepicker 和 jquery 2.2.1 不能一起工作。

干杯托马斯

【讨论】：

jquery-2.1.1.min.js 也是如此（他们在入门模板中使用的版本。只需按照@Thomas 的建议使用版本 2.1.4

【解决方案2】：

首先要知道，你需要检查你的 Materialize css 版本和 javascript 版本，也不要忘记检查 jquery 版本并使用你自定义的 init javascript 中的初始化代码。

检查我在 init.js 中的代码是否通过 cdn 进行初始化、CSS 和 JS Materialize

$(document).ready(function() {
    
    $('.modal').modal();
    //this are my init
    $('#dtp').datepicker();
    $('#dtp').setDate(new Date());
});

<html>
  <head>
    <!-- this is my CSS via cdn -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/css/materialize.min.css">
  </head>
  <body>
    <div class="row">
      <form class="col s12 m6 card">
        <div class="row center">
          <h4>Materialize DateTime Picker</h4>
          <div class="input-field col s12 m12">
            <input id="dtp" type="text" class="datepicker">
            <label for="dtp">Birthday</label>
          </div>
        </div>
      </form>
    </div>
    
    <!-- this is my JS via cdn -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-beta/js/materialize.min.js"></script>
  </body>
</html>

查看Materialize 网站的文档，它对像我这样的程序员总是有帮助的。希望这个回答对你有帮助

尝试运行我的代码片段

【讨论】：

有点奇怪：我在下载materializecss的starter模板时，datepicker不起作用。我总是收到错误datepicker is not a function。当我从上面使用您的代码时，它可以工作。谢谢！

【解决方案3】：

        <div class="row">
          <div class="input-field col s12">
            <input id="idate" type="text"  name="idate" class="datepicker" >
            <label for="idate">Issue Date</label>
          </div>
        </div>


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

【讨论】：