LoginSignup
1
1

More than 3 years have passed since last update.

【Rails6】flatpickrカレンダーの導入で気をつける事

Posted at

自作ポートフォリオを作成している時に、bootstrapのカレンダーが使いづらかった為、flatpickrを導入する事にしました。その時に躓いたポイントがあったので、シェアします。

開発環境

  • macOS Catalina 10.15.7
  • Ruby 2.7.2
  • Rails 6.1.1

すでに何かしらのアプリを作っている前提で進めていきます。

まずはこちらの記事をベースにflatpickrを導入

気をつけないといけなかった点

上記の記事で、

<!-- ***** 以下を追加 ***** -->
<%= form_with model: @calendar do |form| %>
  <input id ="calendar_form" type="text" name="calendar[date]" readonly="readonly" >
  <%= form.submit "送信" %>
<% end %>
<!-- ***** 以上を追加 ***** -->

という部分があるのですが、

僕のアプリはこのようなフォーム設計になっています。

view
<%= f.label :visit_date %>
<input id="calendar_form" type="text" name="visit_history[visit_date]" placeholder="日付を設定" class="form-control" readonly="readonly">

ここで name="コントローラー名[バリュー名]という形にし、下記に記載しているコントローラーに合わせてあげる必要があります。

visit_histories_controller.rb
class VisitHistoriesController < ApplicationController
  before_action :set_visit_history, only: [:show, :edit, :update, :destroy]

  # GET /visit_historys
  # GET /visit_historys.json
  def index
    @visit_histories = VisitHistory.all
  end

  # GET /visit_historys/1
  # GET /visit_historys/1.json
  def show
    @visit_history
  end

  # GET /visit_historys/new
  def new
    @visit_history = VisitHistory.new(visit_history_params)
    @visit_history.build_medical_treatment_history
  end

  # GET /visit_historys/1/edit
  def edit
  end

  # POST /visit_historys
  # POST /visit_historys.json
  def create
    @visit_history = current_user.visit_histories.new(visit_history_params)
    if @visit_history.save
      redirect_to client_path(@visit_history.client_id), notice: "VisitHistory was successfully created."
    else
      render :new
    end
  end

  # PATCH/PUT /visit_historys/1
  # PATCH/PUT /visit_historys/1.json
  def update
    if @visit_history.update(visit_history_params)
      redirect_to @visit_history, notice: "VisitHistory was successfully updated."
    else
      render :edit
    end
  end

  # DELETE /visit_historys/1
  # DELETE /visit_historys/1.json
  def destroy
    @visit_history.destroy
    redirect_to client_path(@visit_history.client_id), notice: "VisitHistory was successfully destroyed."
  end

  private

  # Use callbacks to share common setup or constraints between actions.
  def set_visit_history
    @visit_history = VisitHistory.find(params[:id])
  end

  # Only allow a list of trusted parameters through.
  def visit_history_params
    params.require(:visit_history).permit(:visit_date, :fee, :client_id, medical_treatment_history_attributes: [:user_id, :subjective, :objective, :assessment, :plan, :memo])
  end
end

ここで、さきほどの name="コントローラー名[バリュー名]が合っていないと、
ストロングパラメーターのpermitの部分で弾かれてしまい、@visit_hisrotyの中のvisit_dateの値が nilになってしまいます。

失敗例

あまり良く理解して出来ていなかったため、はじめは name="calendar[date]name="calendar[visit_date]で試していました。

この場合、先程の通りストロングパラメーターで弾かれて、 visit_dateの値が nilになります。

binding.pryでパラメーターを確認してみました。
visit_dateの値が nilになっています。

ターミナル
[1] pry(#<VisitHistoriesController>)> params
=> #<ActionController::Parameters {"authenticity_token"=>"ADamDRCkllatE4r75IMx5YaVQSkqML1tkzc6zhm9uFtqgsQ6uG0JbKWpe4PC8AAryLjP3587W5233WLlp_dqDQ", "visit_history"=>#<ActionController::Parameters {"client_id"=>"1", "fee"=>"5000", "medical_treatment_history_attributes"=>{"user_id"=>"1", "subjective"=>"", "objective"=>"", "assessment"=>"", "plan"=>"", "memo"=>""}} permitted: false>, "calendar"=>#<ActionController::Parameters {"visit_date"=>"2021-03-25"} permitted: false>, "commit"=>"登録", "controller"=>"visit_histories", "action"=>"create"} permitted: false>
[2] pry(#<VisitHistoriesController>)> @visit_history
=> #<VisitHistory:0x00007fd57424f710
 id: 20,
 visit_date: nil,
 fee: 5000,
 client_id: 1,
 user_id: 1,
 created_at: Thu, 25 Mar 2021 17:49:26.938352000 JST +09:00,
 updated_at: Thu, 25 Mar 2021 17:49:26.938352000 JST +09:00>

成功例

visit_dateの中に値がしっかりと入っています。

ターミナル
[1] pry(#<VisitHistoriesController>)> params
=> #<ActionController::Parameters {"authenticity_token"=>"QXCgqasqGOeA9w-vtKOevhC8Bz9e-WHQ8yWr1nYd9skrxMKeA-OH3YhN_teS0K9wXpGJyevyhyDXz_P9yFcknw", "visit_history"=>#<ActionController::Parameters {"client_id"=>"1", "visit_date"=>"2021-03-28", "fee"=>"9000", "medical_treatment_history_attributes"=>{"user_id"=>"1", "subjective"=>"", "objective"=>"", "assessment"=>"", "plan"=>"", "memo"=>""}} permitted: false>, "commit"=>"登録", "controller"=>"visit_histories", "action"=>"create"} permitted: false>
[2] pry(#<VisitHistoriesController>)> @visit_history
=> #<VisitHistory:0x00007fc42c874c48
 id: 23,
 visit_date: Sun, 28 Mar 2021,
 fee: 9000,
 client_id: 1,
 user_id: 1,
 created_at: Thu, 25 Mar 2021 19:17:45.940796000 JST +09:00,
 updated_at: Thu, 25 Mar 2021 19:17:45.940796000 JST +09:00>

まとめ

Rails6でflatpickrを導入する際の記事がほとんど英語のものしか無かったので、今回記事としてまとめてみました。見ていただいた方の参考になれば幸いです。

1
1
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1