Datarangepicksというカレンダーでの範囲指定ライブラリを使用した時の備忘録
datarangepickerの使い方としては、
以下の読み込みコードを、application.html.erbのheadの中に記入。
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
次に表示させたいページにviewのコードをコピペするだけで使える。
http://www.daterangepicker.com/ ←ここを参照。
管理しやすいようにassetsにjs/cssファイルを作りそれを読み込む
このままでもいいのだが、管理しやすいように、application.html.erbに描き込みすぎないように
assetsにjs/cssファイルを作りそれを読み込むスタイルに変更する。
①読み込み用のファイルを作る
assets/javascriptディレクトリ配下に以下の２ファイル作成
・moment.min.js
・daterangepicker.min.js
assets/cssディレクトリに配下に以下のファイル作成
・daterangepicker.css
②それぞれのCDNのURL先に飛んでコピー ⇨ 各ファイルに貼り付ける。
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
＊上記の以下部分に飛んで、そこのコードをコピペするってこと。⇨https://cdn.jsdelivr.net/momentjs/latest/moment.min.js
③作成したファイルをapplucation.js, application.cssから読み込む
application.js
//= require moment.min ←jsとかの拡張子はいらない
//= require hoge/daterangepicker.min ←ディレクトリがあればこのように考慮する
application.css
*= require daterangepicker ←拡張子いらない。
たまに表示されないとかいう時は、位置に注意する。
同じディレクトリ以下の行に揃えるとかすると、表示されます。