なみひらブログ

学んだことを日々記録する。~ since 2012/06/24 ~

Materializeのdatepickerの初期化でエラーがでたときの対応メモ

背景

  • Materializeのdatepicker, timepickerを使おうとしたら、初期化でエラーができたのでその対応のメモです(;´Д`)
  • ※結論的には、Materializeのdatepickerどうこうではなく、ライブラリの読み方の問題。

materializecss.com

エラー

TypeError: $('.datepicker').datepicker is not a function. (In '$('.datepicker').datepicker()', '$('.datepicker').datepicker' is undefined)

だめだった例

  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  
  <script type="text/javascript">
    $(function(){
       $('.datepicker').datepicker();
       $('.timepicker').timepicker();
    });
  </script>

正しい

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>

  <script type="text/javascript">
    $(function(){
       $('.datepicker').datepicker();
       $('.timepicker').timepicker();
    });
  </script>

その他の備忘録

  • jqueryはver3.0.0以上じゃないとだめっぽい(;´Д`)

まとめ

こういうのぱっと気付けない(´・ω・`)