[rails] bootsrap3のdatetimepickerでyear-monthのみ指定し、DBに保存

#はじめに
bootstrap3のdatetimepickerを使用し、年月のみ選択できるようにしてから、DBに保存しようとすると、`argument out of range`のエラーが出たので、対処法を備忘録として記録します。



#gemのインストール
`momentjs-rails`と`bootstrap3-datetimepicker-rails`を`Gemfile`に追加し、bundle installを実行

```
gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.47'
```
#application.js.coffeeに対象のjsファイル名とコードを記述

```application.js.coffee
#= require moment
#= require bootstrap-datetimepicker
##上二つだけでも、正常に動作します。下のrequireは、カレンダーを日本語対応にするためのjsファイルです。
#= require moment/ja

$ ->
  $(".datetimepicker").datetimepicker()
```

#application.css.scssにbootstrap-datetimepickerのcssファイル名をインポート

```application.css.scss
@import 'bootstrap-datetimepicker';
```

#各formatに対応するUIの変化 (飛ばしても大丈夫です！)

formを実装する前にdatepikcerの各formatの説明をします。
サブタイトルにもある通り、こちらは飛ばしても問題ありません。

formに指定するdateformatによって、viewで表示されるdatepickerのuiが変化します。


###dateformatが `date_format: 'YYYY'`の場合

年のみを指定できます。
formのエリアは、「年」の表示になります。

<img width="271" alt="スクリーンショット 2017-10-15 12.12.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/207126/9abaf6c1-db30-dd19-0b13-95d95fed0341.png">


###dateformatが `date_format: 'YYYY-MM'`の場合(今回の例)
年に加えて、月を指定できるようになります。
formのエリアは、「年-月」の表示になります。

<img width="272" alt="スクリーンショット 2017-10-15 12.13.00.png" src="https://qiita-image-store.s3.amazonaws.com/0/207126/3c42c5af-2fd5-2982-7faa-ffccb738185a.png">

###dataformatが `date_format: 'YYYY-MM-DD'`の場合

年月に加えて、日にちを指定できるようになります。
formのエリアは、「年-月-日」 の表示になります。

<img width="271" alt="スクリーンショット 2017-10-15 12.13.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/207126/3a321431-56c9-e86b-d541-8f99a4950f39.png">


###dateformatが `date_format: 'YYYY-MM-DD hh:mm'`の場合

カレンダーの一番下に時計マークが表示され、クリックすると時間を指定できます。
また、formのエリアは、 「年-月-日 時:分」 の表示になります。

<img width="273" alt="スクリーンショット 2017-10-15 12.15.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/207126/2acf0c11-f884-d4f0-8f7c-c80ddedd5ee9.png">
↓
<img width="270" alt="スクリーンショット 2017-10-15 12.15.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/207126/de1fa58b-fbbd-f257-404d-ad784bed9be0.png">



#formの実装

1. inputタイプは、`text_field`を指定してください。

2. 今回は、dataに`date_format: 'YYYY-MM-01'`を指定します。
'YYYY-MM-01'のように日時をあらかじめ月の始まりに設定し、エラーを防ぎます。

3. classに[application.js.coffee](https://qiita.com/KeisukeYoshida0220/items/c9bc0e4aac49768670fe#applicationjscoffee%E3%81%AB%E5%AF%BE%E8%B1%A1%E3%81%AEjs%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB%E5%90%8D%E3%81%A8%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%A8%98%E8%BF%B0)でjequeryを記述しましたが、その際に.datetimepickerを指定しました。
inputのclassにdatetimepickerを追加してください。

4. (おまけ)各formatの説明を見ていただいた方は、datetimepickerに日本語が指定されているを確認いただいたと思います。
こちらは、localeに `date_locale:jp`と指定するだけで日本語になります。


上の1〜4のまとめ
`= f.text_field :published_at, data: { date_format: 'YYYY-MM-01'}, locale: {date_locale: 'ja'}, class: 'form-control datetimepicker'`


```_form.html.slim
= form_for [@hoge], html: { class: 'form-horizontal slider-form', role: 'form' } do |f|
  - e = f.object.errors.to_hash(true)
  .form-group
    = f.label :published_at, '公開日', class: 'control-label col-sm-3'
    .col-sm-9
      = f.text_field :published_at, data: { date_format: 'YYYY-MM-01'}, locale: {date_locale: 'ja'}, class: 'form-control datetimepicker'
      = error_description_list e[:published_at]

  .form-group
    .col-sm-9.col-sm-offset-3
      = f.submit class: 'btn btn-success'
```

ただし、このままDBに保存すると、時間がUTCになってしまうため、modelでタイムゾーンをJSTに変換する必要があります。
self.published_at.in_time_zone('Tokyo')
こんな感じで、時間をJSTに変換できます。
modelでformの値を取得し、加工してDBに保存する方法は、[こちら](https://qiita.com/KeisukeYoshida0220/items/e1ce152ac8d89845aab3)です


参考サイト
https://qiita.com/akishin/items/ef197a312a3cb245c0b3
https://qiita.com/patorash/items/90c45724af9656715c67