RailsにBootstrap Datetimepickerを設定する

Datetimepickerって結局どれ使ったらいいのかよくわからず、 jquery UIのDatePickerとか試してみましたが、 見た目のデザインと簡単に設定できる感じから Bootstrap Datetimepickerが良いんじゃないかと思っています。

今回、あまり細かな設定はしていませんが、 Ruby on Railsに導入する方法です。

Gemfile

Gemfileに以下を追加して、bundle install

gem 'momentjs-rails'
gem 'bootstrap3-datetimepicker-rails'

application.js

assets/javascripts/application.jsに以下を追加します。

//= require moment
//= require moment/ja
//= require bootstrap-datetimepicker

application.scss

assets/stylesheets/application.scssに以下を追加します。

@import 'bootstrap-datetimepicker';

aaa.html.slim

ビューで以下のように設定します。

.form-group
  = f.label :birthday
  = f.text_field :birthday, class: 'form-control', pattern: '\d{4}/\d{1,2}/\d{1,2}'


javascript:
  $(function () {
    $("#birthday").datetimepicker({
      format: 'YYYY/MM/DD',
      locale: 'ja'
    });

  });

完成イメージ

関連記事

marketing-web.hatenablog.com

marketing-web.hatenablog.com

marketing-web.hatenablog.com

UIまで手の回らないプログラマのためのBootstrap 3実用ガイド

参考サイト

github.com