【Laravel5.8】UIkitのDate Pickerを導入したい
Laravel5.8にUIkitのDate Pickerを導入したい。
ドキュメントを見ると以下のコードを追加するだけ…と書いていました。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.6/js/uikit.min.js"></script> <form class="uk-form"> <input type="text" data-uk-datepicker="{format:'DD.MM.YYYY'}"> </form>
var datepicker = UIkit.datepicker(element, { /* options */ });
しかし、動かず。
公式ドキュメントのページ上では動いているためブラウザの問題ではないようです。
CodePenに書かれているコードでも動かず。
そこで公式ドキュメントのソースを読み込んでみると、
<script src="../src/js/components/datepicker.js"></script>
という怪しいソースが。Datepicker用に他のcdnを読み込まなければならないのでは。
結論としては以下の様にUIkit2のバージョンに遡らないといけない様でした。
<!-- UIkit CSS --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.1/css/uikit.min.css" /> <!--jQuery--> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js" type="text/javascript"></script> <!-- UIkit JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.1/js/uikit.min.js"></script> <!--Datepicker用のcdn--> <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.26.1/js/components/datepicker.js"></script>
UIkit3で組んでいたのでレイアウトは崩れましたが、こんな感じで実装。