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
  })
})


f:id:alv5:20210307113831j:plain