Question

我第一次在我的网络应用程序中使用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中添加时间戳？

Answer 1

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

欢呼声托马斯

Answer 2

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

检查我在init.js中的代码进行初始化，CSS和JS通过cdn实现物化

＆＃13;

$(document).ready(function() {
    
    $('.modal').modal();
    //this are my init
    $('.datepicker').datepicker();
});

＆＃13;

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

＆＃13;

查看https://developers.facebook.com/bugs/146171089525966/网站上的文档，这对像我这样的程序员来说总是有帮助的。希望这个答案可以帮助你

尝试运行我的代码段

Answer 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,
});

Materializecss datepicker无效

3 个答案: