【Rails】簡単にDatetimepickerを使う方法

はじめに

個人的にオススメなDatetimepickerについて、紹介しようと思います。
導入がめちゃくちゃ簡単です。

できあがり例

こんな感じで、日付と時間を選ぶと実装することができます。

個人的にこのdatetimepickerが優れていると感じる点は以下です。

• はじめからカレンダーと時間が表示されていること
• ボタンをクリックする回数が2回で入力ができること

他のdatetimepickerだと、日付をクリックしないと時間の欄が表示されないため作業量を一瞬で把握できません。
微妙な差ではありますが、ユーザーが少しでも楽な方を考えました。

使い方

まず、GemFileに以下のgemを記載して、bundle installをしてください。

GemFile

gem 'jquery-datetimepicker-rails'

$ bundle install

次に、app/assets/stylesheets/application.cssに以下の１行を追加してください。

app/assets/stylesheets/application.css

*= require jquery.datetimepicker

次に、app/assets/javascripts/application.jsに以下の１行を追加してください。
（コメントはそのままで大丈夫です。）

app/assets/javascripts/application.js

//= require jquery.datetimepicker

下記の２行を追加することで、日本語対応のdatetimepickerを適用する準備が整いました。
（私の環境では日本語対応になりませんでした。どなたか分かる方がいれば教えていただきたい。。）

application.js に 下記を書いていますが、各モデルのみに適用したい場合はcoffee scriptに書いても問題ありません。（ただし、その場合はcoffee scriptへの変換が必要。）

app/assets/javascripts/application.js

// 日本語化対応用
$.datetimepicker.setLocale('ja');

// datetimepickerクラスにdatetimepickerを適用する。
$('.datetimepicker').datetimepicker();

今回は一例として、postモデルのpost_datetimeカラムにdatetimepickerを適用しています。
ポイントは、__class に datetimepicker をつけること__です。そうすることでその部分に適用されます。
slimに馴染みのない方、ごめんなさい。。

new.html.slim

= form_for @post do |f|
  = label :post, :post_datetime
  = f.text_field :post_datetime, value: "", class: "datetimepicker", autocomplete: "off"
// class に datetimepicker をつけるとその部分に適用される。

まとめ

いかがでしょうか。導入は簡単でしたでしょうか。
不備などがあれば、申しつけください。

参考

• GitHub(jquery-datetimepicker-rails)
  • https://github.com/Envek/jquery-datetimepicker-rails