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入門その6〜RouterとComponentを使ってTODOアプリを修正〜

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

Vue CLIでPWAが簡単に実装できる 〜 Service Worker と A2HS 〜

1 はじめに2 環境構築2.1 Vue CLIをインストール2.2 プロジェクトを作成2.3 PWA選択時に追加されるファイル2.4 動作確認時の注意3 Service Worker3.1 Servi ...

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

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

Vue.jsとRailsでTODOアプリのチュートリアルみたいなものを作ってみた【2018.03.24】

1 はじめに1.1 作るもの1.2 前提条件、及び環境1.3 Webpack について2 準備2.1 Rails + Vue.jsのプロジェクトを作成する2.2 Vue.jsの表示確認2.3 devサ ...

【入門】Vuetifyで手軽に綺麗なWebページを作る

1 はじめに1.1 Vuetifyとは2 Vuetifyを導入する2.1 パッケージを追加する2.2 TypeScriptを採用している場合3 Vuetifyのコンポーネント3.1 Applicati ...

フォロー

follow us in feedly

blog-page_side_responsive

2018年1月
 123456
78910111213
14151617181920
21222324252627
28293031 

アプリ情報

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