[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のエリアは、「年」の表示になります。

dateformatが date_format: 'YYYY-MM'の場合(今回の例)

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

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

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

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

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

↓

formの実装

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

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

3. classにapplication.js.coffeeで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/akishin/items/ef197a312a3cb245c0b3
https://qiita.com/patorash/items/90c45724af9656715c67