FrontEnd

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

投稿日:2018年1月24日 更新日:

はじめに

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

Pickers

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

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

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

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

前提条件

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

ビューのイメージ

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

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

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

started_at_hにはハッシュでdatetimeを渡し、その値を使って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についてテストコードも書きました。
こちらもこれで良いのかよく分からないので参考程度にご覧ください。

さいごに

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

blog-page_footer_336




blog-page_footer_336




-FrontEnd
-,

執筆者:


comment

メールアドレスが公開されることはありません。

CAPTCHA


関連記事

Vue.js入門その2〜Vueインスタンスってなんぞ?〜

1 はじめに2 Vueインスタンス3 プロパティとメソッド4 インスタンスライフサイクルフック5 フィルター6 算出プロパティ6.1 例文6.2 算出プロパティを使用した書き換え6.2.1 HTML6 ...

js

Vue.jsをTypeScriptで安全に開発するためのtsconfig.json

1 はじめに1.1 開発環境1.2 プロジェクト作成時点のtsconfig.json2 include3 exclude4 compilerOptions4.1 コンパイル系オプション4.1.1 ta ...

js

JSで緯度経度情報から住所を取得する

1 はじめに2 キーを取得する2.1 キーを取得する3 コード4 参考5 さいごに はじめに Google Maps JavaScript APIを利用して、緯度経度の数値から住所を検索する方法を紹介 ...

JQueryでformにinput要素を足していく

はじめに 最近個人的にディープラーニングの勉強をしているtonnyです。 ディープラーニングの勉強がてら、好きな麻雀に関するWebアプリを作成してみました。 今回はその作成の中で、今まであまりやってこ ...

Vue.js入門その3〜簡単にTODOアプリを作ってみたよ〜

はじめに 7/12 修正 記事下部にて、filterメソッドを使用している箇所がありましたが、forEachの方が適しているとご指摘がありましたので、修正しました。 以前Qiitaの方に投稿した記事で ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年1月
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

私たちは無料アプリもリリースしています、ぜひご覧ください。 下記のアイコンから無料でダウンロードできます。