RailsとBootstrap4 でカレンダー形式の日付入力フォームを実装する

## やりたい事
Railsでこんな感じの日付の入力フォームを実装する。

<img width="475" alt="スクリーンショット.png" src="https://qiita-image-store.s3.amazonaws.com/0/254709/b376e7ac-1107-39a0-fc18-899e2b81e006.png">



## 環境
- Ruby 2.3
- Rails 5.0.7
- Bootstrap4

## やる事
1. Tempus Dominusのインストール
2. moment.jsのインストール
3. font-awsomeのインストール
4. 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への書き込み
```ruby:Gemfile
gem "bootstrap4-datetime-picker-rails"
```
##### bundle installの実行
```terminal:ターミナル
XXX-MacBook-Pro:sample-app ユーザー$　bundle install 
```
##### application.jsへの書き込み
```js:/app/assets/javascripts/application.js
//= require tempusdominus-bootstrap-4.js
```

##### application.scssへの書き込み
```sass:/app/assets/stylesheets/application.scss
@import "tempusdominus-bootstrap-4.css";
```

を行ってインストールを完了します。

## 2. moment.jsのインストール

moment.jsとはJavaScriptの日付や時刻などを扱いやすくするためのライブラリです。
Tempus Dominusを動かすために必要なのでこちらもインストールします。

gemfileに書き込んでbundle installを実行

```ruby:Gemfile
gem 'momentjs-rails'
```
```terminal:ターミナル
XXX-MacBook-Pro:sample-app ユーザー$　bundle install 
```


インストール後はapplication.jsへの書き込みも行う。
＊この時、moment.jsのrequire文はTempus Dominusのrequire文よりも前に書きましょう
（moment.jsはTempus Dominusよりも先に読み込む必要があるため）

```js:/app/assets/javascripts/application.js
//= 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。

```ruby:Gemfile
gem "font-awesome-rails"
```
```terminal:ターミナル
XXX-MacBook-Pro:sample-app ユーザー名$　bundle　install 
```

インストール後は application.scss でimportしましょう。

```sass:/app/assets/stylesheets/application.scss
@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ファイルの方は適宜読み替えてください。。。）

```haml:_form.html.haml

-#フォーム部分のみ記載

= 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に日時情報が渡されます。

```ruby:
# 文字列型でparameterに渡される（"start_time"は入力フォームの項目名）
 "start_time"=>"2019/01/30 10:30"
```
あとはそれぞれ、テーブルに保存するなり表示するなりしてデータを使用しましょう。



以上が、RailsとBootstrapでカレンダー形式の日付入力フォームを作成する手順です。
ご指摘、間違え等がありましたらコメントをお願い致します。

最後までご覧いただきありがとうございました。