Rails6での flatpickr 導入
Rails6 から Webpacker が導入されたため、flatpickr の導入がこれまでと異なり苦戦したので備忘録として記録します。
下記の記事を参考に導入しました。
dzone.com
flatpickrの導入
1.Yarn に必要なライブラリをターミナルで追加
$ yarn add bootstrap jquery popper.js flatpickr
2.jQuery を使用するためのコードを追記
config/webpack/environment.jsに記述
const { environment } = require('@rails/webpacker') const webpack = require('webpack') environment.plugins.append('Provide', new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' })) module.exports = environment
3.CSSでWebpackerを扱う
app/views/layouts/application.html.erbに以下の記述を追加
<!-- stylesheet_link_tag の行の下に記述する --> <%= stylesheet_pack_tag "application", media: "all", "data-turbolinks-track": "reload" %>
javascriptディレクトリ内にCSS用のファイルを作成
mkdir app/javascript/stylesheets touch app/javascript/stylesheets/application.scss
作成したapp/javascript/stylesheets/application.scssファイルに次を追加
@import "flatpickr/dist/flatpickr.css";
4.JavaScript ファイルを読み
app/javascript/packs/application.js に以下のコードを追記
require("flatpickr") import flatpickr from "flatpickr"; document.addEventListener("turbolinks:load", () => { flatpickr("[class='flatpickr']", { }) }) // stylesheets require("../stylesheets/application.scss") })
あとはclassに 'flatpickr' を指定すば表示できるはずです。
<%= form_with model: @log, local: true do |f| %> <%= hidden_field_tag :score_id, @score.id %> <div> <%= f.text_area :content, placeholder: "練習記録", class: "text-box" %> </div> <div> <%= f.text_field :start_time, placeholder: "日付を選択", class: 'flatpickr' %> <%= f.submit "記録する", class: "record-btn" %> </div> <% end %>
おまけ
flatpickrは様々なカスタマイズが可能です。
今回は以下のようにカスタマイズを行いました。
・スマートフォンでも使用
・日付の選択を今日まで可能に
document.addEventListener("turbolinks:load", () => { const TODAY = new Date(new Date().setHours(0, 0, 0, 0)) flatpickr("[class='flatpickr']", { // スマートフォンでもカレンダーに「flatpickr」を使用 disableMobile: true, // 今日までを選択可能 maxDate: TODAY }) })