やりたい事
Railsでこんな感じの日付の入力フォームを実装する。
環境
- Ruby 2.3
- Rails 5.0.7
- Bootstrap4
やる事
- Tempus Dominusのインストール
- moment.jsのインストール
- font-awsomeのインストール
- HTMLに書き込む
この記事ではBootstrap4のインストールは記載しませんがこの記事なんかが参考になるかと思います。
https://qiita.com/NaokiIshimura/items/c8db09daefff5c11dadf
1. Tempus Dominusのインストール
まずはじめに、Bootstrap上で動く”Tempus Dominus”というプラグインを使用します。
https://tempusdominus.github.io/bootstrap-4/
こちらはBootstrap４用のプラグインとなっております。
各フレームワーク毎のインストール方法はTempus Dominusのホームページに載っています。
https://tempusdominus.github.io/bootstrap-4/Installing/#rails
今回は、Railsなのでそれに従って
Gemfileへの書き込み
gem "bootstrap4-datetime-picker-rails"
bundle installの実行
XXX-MacBook-Pro:sample-app ユーザー$ bundle install
application.jsへの書き込み
//= require tempusdominus-bootstrap-4.js
application.scssへの書き込み
@import "tempusdominus-bootstrap-4.css";
を行ってインストールを完了します。
2. moment.jsのインストール
moment.jsとはJavaScriptの日付や時刻などを扱いやすくするためのライブラリです。
Tempus Dominusを動かすために必要なのでこちらもインストールします。
gemfileに書き込んでbundle installを実行
gem 'momentjs-rails'
XXX-MacBook-Pro:sample-app ユーザー$ bundle install
インストール後はapplication.jsへの書き込みも行う。
＊この時、moment.jsのrequire文はTempus Dominusのrequire文よりも前に書きましょう
（moment.jsはTempus Dominusよりも先に読み込む必要があるため）
//= require moment
//= require moment/ja.js
//= require tempusdominus-bootstrap-4.js
カレンダーを日本語にしたい場合は moment/ja.js もrequireしましょう。
3. font-awesomeのインストール
Tempus Dominusではfont-awesomeのアイコンを使用しているのでこちらもインストールします。
gemfileに記載してbundle install。
gem "font-awesome-rails"
XXX-MacBook-Pro:sample-app ユーザー名$ bundle install
インストール後は application.scss でimportしましょう。
@import "font-awesome";
@import "tempusdominus-bootstrap-4.css";
この時font-awesomeのimport文はTempusDominusのimport文よりも上に記載しましょう。そうしないとTempusDominusがfont-awesomeを参照できなくなってしまいます。
4. HTMLに書き込む
ここまでできたら最後にHTMLへタグを書き込んでいく。
カレンダー付き・日付のみ・時刻のみ
といった表示のバリエーションはTempusDominusホームページに記載してあります。
https://tempusdominus.github.io/bootstrap-4/Usage/
ここで入力フォームが触れる状態ですので、実際に触ってみて自分の目的に合ったものを選びましょう。
基本的に、ここのページに載っているHTMLコードを記載すれば画面上に入力フォームが現れます。
ちなみにこの記事の冒頭に掲載したフォームのコードは以下の通り。（hamlで書いていますので.erbファイルの方は適宜読み替えてください。。。）
-#フォーム部分のみ記載
= form_for [任意のモデル] do |f|
.form-group.event__name
= f.label :name do
イベント名
= f.text_field :name, class: "form-control"
.form-group.event__start-time
= f.label :start_time do
開始日時
= f.text_field :start_time, class: "form-control datetimepicker-input", id: "start_time", data: {toggle: "datetimepicker", target: "#start_time"}
= f.submit "実行", class: "btn w-100"
このフォームでsubmitボタンを押下すると文字列型でcontrollerに日時情報が渡されます。
# 文字列型でparameterに渡される（"start_time"は入力フォームの項目名）
"start_time"=>"2019/01/30 10:30"
あとはそれぞれ、テーブルに保存するなり表示するなりしてデータを使用しましょう。
以上が、RailsとBootstrapでカレンダー形式の日付入力フォームを作成する手順です。
ご指摘、間違え等がありましたらコメントをお願い致します。
最後までご覧いただきありがとうございました。