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についてテストコードも書きました。
こちらもこれで良いのかよく分からないので参考程度にご覧ください。

さいごに

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

page_footer_300rect




page_footer_300rect




-FrontEnd
-,

執筆者:


comment

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

CAPTCHA


関連記事

Vue.js入門その6〜RouterとComponentを使ってTODOアプリを修正〜

1 はじめに2 vue-routerのインストール3 サーバーサイドの改修3.1 APIに詳細(show)を追加3.2 元となるビューファイルを作成3.3 ルーティングの修正4 Vue.jsの実装4. ...

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

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

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

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

react-icon

React Big Calendarの複数タイムゾーン対応

1 はじめに2 端末のタイムゾーンのみに対応する場合3 複数のタイムゾーンに対応する。3.1 日時を指定のタイムゾーンに変換する3.2 イベントの開始日時・終了日時を動的に設定する3.3 ラップクラス ...

AMPに対応してモバイルページを高速に表示させる

1 はじめに2 AMPとは3 なぜAMPでは高速に表示されるのか3.1 非同期スクリプトのみを許可3.2 リソース読み込みに優先度を付ける3.3 プリレンダリング4 AMPの3要素4.1 AMP HT ...

フォロー

follow us in feedly

page_side_300rect

2018年1月
« 12月 2月 »
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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