spring of life

技術、ときどき日常のブログ(予定)

rails で bootstrap3-datetimepicker を使ってみた

しばらく新しいことをしてなかったので、ブログが書けなかった。。。

7月0回か〜まぁいろいろ忙しかったしなぁ



さてさて今回は、家計簿の登録画面で、日付を入力する時にカレンダーから選択できるようにしたということで、bootstrap3-datetimepckerの使い方の紹介。

Bootstrap 3 Datepicker

github.com


  • gem のインストール
    • rails で使う場合は、bootstrap3-datetimepicker-rails という gem があるので、それをインストールする
    • momentjs-rails と依存関係があるらしいので、一緒にインストールする
    • いちおうgithubに書いてある通りにバージョンも指定
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.47'
gem 'momentjs-rails', '>= 2.9.0'
  • application.js の更新
    • インストールした gem を使えるようにする
    • 日本語対応したい場合は、moment/ja も記載する
...
//= require moment
//= require moment/ja
//= require bootstrap-datetimepicker
...
  • application.css の更新
    • こちらは bootstrap-datetimepicker のみ更新
...
*= require bootstrap-datetimepicker
...
  • カレンダー表示関数作成
    • 最後にカレンダーを表示させる関数を coffeescript や js で書く
    • datetimepickerに渡すパラメーターのキー名はbootstrap3になってちょっと変わったりしてるから注意が必要かも
$ ->
  $('.datepicker').datetimepicker({
    format: 'YYYY-MM-DD',
    locale: 'ja',
    dayViewHeaderFormat: 'YYYY年 MM月'
  })
  return
  • あと、カレンダーがフォームの位置に表示されない場合は、以下のスタイルを追加する
# 入力フォーム

<span id='date-form' class='input-custom'>
  <%= f.label :date, t('views.payment.date').html_safe + ':' %>
  <%= f.text_field :date, {:class => 'form-control datepicker', :required => true} %>
</span>
# CSS

#date-form {
  position: relative;
}