こんにちは、くまごろーです。
今作成中の家計簿アプリのフロント部分を、materializecssで調整しています。
JavaScriptの知識が全然ないせいで、使いたい機能を全く使いこなせず絶望しています(=_=)
今日は、materializeのdatepickerについてまとめます。
１ datepickerって？
jQueryのライブラリの１つらしい。日付を入力するときに自動的にカレンダーが出てきてすごい便利なやつ。materializeだとこのようなデザインになっていてすごいおしゃれ。
これは絶対使いたい！
２ 導入方法
（１）htmlファイルにjQuery, materializeを指定
<script th:src="@{/webjars/jquery/3.5.1/jquery.min.js}"></script> <script type="text/javascript" th:src="@{/webjars/materializecss/1.0.0/js/materialize.min.js/}"></script> <link rel="stylesheet" th:href="@{/webjars/materializecss/1.0.0/css/materialize.min.css}">
（２）html部分に以下のタグを貼る
タグはたったの１行。
<input type="text" class="datepicker">
（３）jQueryで動きを付ける
$(document).ready(function(){ $('.datepicker').datepicker(); });
（４）はまったこと
こんなシンプルな手順で、はまるとこなんてあるの？ていう感じですが、中々苦戦しました。
問題は（１）。
jQuery,js,cssの順番によって、datepickerが起動しなかったり、materializeのスキンが適用されなかったりしました。
↑の順番で記述したらうまくいった(-"-)
３ datepickerを日本語化
オリジナルのdatepickerは英語でわかりづらいので、日本語化しました。
表示周りは、全てjavascript部分に記載すればいいみたいでした。
勿論、JavaScriptもjQueryも全然わからないので、色んな記事を参考にしてなんとか実装しました・・・
今回は、特にこちらの記事を参考にさせていただきました。
MaterializeCSSのDate Pickerを日本語化する - Null and void
$(document).ready( function() { $('.datepicker').datepicker({ format : "yyyy-mm-dd", i18n : { months : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ], monthsShort : [ "1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月" ], weekdays : [ "日曜日", "月曜日", "火曜日", "水曜日", "木曜日", "金曜日", "土曜日" ], weekdaysShort : [ "日", "月", "火", "水", "木","金", "土" ], weekdaysAbbrev : [ "日", "月", "火", "水", "木","金", "土" ], nextMonth : "翌月", previousMonth : "前月", labelMonthSelect : "月を選択", labelYearSelect : "年を選択", setDefaultDate : true, cancel : 'キャンセル', clear : 'クリア', done : 'OK', close : "閉じる", format : "yyyy-mm-dd", } }); });
こんな感じの見た目になりました。
４ 参考
