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

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

調べたところ、 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

• viewを編集 Bootstrap datetimepickerのドキュメントを参考に設定

<div class='input-group date datepicker'>
  <%= f.text_field :start_at, class: 'form-control' %>
  <span class="input-group-addon">
</div>

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

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

参考

• RailsにDateTimePickerを導入する
• Uncaught TypeError: Cannot read property 'top' of undefined
• TrevorS/bootstrap3-datetimepicker-rails
• Bootstrap datetimepicker