[Rails + Materialize] DateTimePickerがなかったので…

はじめに

こんにちは！
Materializeには便利なコンポーネントがたくさんあります。
DatePickerやTimePickerもその一つです。

Pickers

ただ、現状DateTimePickerはないようです。
Railsで日付+時間で操作したいこともあるかと思います。

たまたま要件として、フォームの中でDateTimeを扱う必要がでました。
私が考えた選択肢としては、

1. DateTimePickerを作る or 別のプラグインを入れる
2. RailsのFormヘルパーを使用する（その部分だけデザインが変わることを許容する）
3. DatePickerとTimePickerをそれぞれ使用し、DateTimeに変換する

今回は極力Materializeのフレームワークに載ったかたちで進めたい、ということもあったので、「3」を選択しました。
その他の選択肢もあるかと思います。
今回は参考になるかと思い、記事にまとめたいと思います。

前提条件

今回はイベントを管理する events テーブルに、開始日時を保存する started_at があるとします。
started_at は datetime でDBに保存するものとします。

ビューのイメージ

上述の通り、MaterializeにDateTimePickerがないので、下記のように入力フォームを分けたいと思います。

モデルにゲッターとセッターを追加

started_at とは別で、 started_at_h というメソッドを追加します。
この started_at_h に値が入ったら、 started_at にDateTimeでセットします。

started_at_h にはハッシュで date と time を渡し、その値を使って started_at を更新します。
逆に取り出す時は、 started_at の値を操作します。

入力フォームに追加

JSファイルにて使用宣言

MaterializeのDatePickerとTimePickerを使用するためには、JSにて宣言する必要があります。

JQueryを使用している場合は、下記のようになります。

HTML

フォームの方では、 strated_at_h のnameで渡します。
nameは started_at_h[date] といったかたちで書くことで、submitした後ハッシュでパラメータを投げてくれます。

コントローラーのストロングパラメータを修正

フォームから値を受け取る時は、スタロングパラメータを使用することが多いと思います。
受け取る際には、 started_at ではなく、 started_at_h にし、ハッシュを指定します。

テストコードも書いてみる

モデルの started_at_h についてテストコードも書きました。
こちらもこれで良いのかよく分からないので参考程度にご覧ください。

さいごに

今回の件に対する良い対応なのかは分かりませんが、一例としてご覧いただければ嬉しく思います。
また、もし他に良い方法があればご教授いただきたく思います。