[Rails]日付と時間の入力フォームにDateTimePickerを使う(bootstrap3-datetimepicker-rails)


[まとめ] 現在開催中のKindleセール情報はこちら

Ruby2.1.0, Rails4.1で確認

フォームで日時を入力する際に、カレンダーを表示して入力サポートをするDateTimePickerを導入したかったので調べてみました。

datetime

調べたところ、TrevorS/bootstrap3-datetimepicker-rails というgemが公開されていたのでこちらを使わせていただくことにしました。

  • Gemfile に以下を追加してbundle install
# Gemfile

gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'
  • app/assets/javascripts/application.js に追記
//= require moment
//= require bootstrap-datetimepicker

var data = {'data-date-format': 'YYYY-MM-DD hh:mm:ss' };
$(function(){
  $('.datepicker').attr(data);
  $('.datepicker').datetimepicker();
});
  • app/assets/stylesheets/application.css に追記
*= require bootstrap-datetimepicker
<div class='input-group date datepicker'>
  <%= f.text_field :start_at, class: 'form-control' %>
  <span class="input-group-addon">
</div>

これでカレンダー表示ができるようになりました。

Bootstrapはお手軽でいいですね。

参考

[まとめ] 現在開催中のKindleセール情報はこちら