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入門その3〜簡単にTODOアプリを作ってみたよ〜

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

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

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

Vue on Rails で作ったアプリを振り返ってみる

1 はじめに2 全体的なこと2.1 ディレクトリ構成2.2 CSSフレームワーク2.3 Capistranoでのデプロイ3 axiosのラッパー4 Vuex4.1 ログインの状態管理5 Router6 ...

tailwindcss

Tailwind CSSの基礎とVue.jsへの導入

1 はじめに2 Tailwind CSSとは2.1 utility class3 Bootstrapとの比較3.1 柔軟性3.2 コード量3.3 学習コスト3.4 ファイルサイズ3.5 その他4 なぜ ...

js

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

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

フォロー

blog-page_side_responsive

2018年1月
 123456
78910111213
14151617181920
21222324252627
28293031  

アプリ情報

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