Railsでbootstrap datetimepickerを日本語化しつつ導入(with rails assets)

普段はよくbootstrap-datepickerを使うのですが、 今回の案件では時刻まで絞り込みたいというお話だったのでdatetimepickerを導入してみました。

こちらを使います。かなり高機能な上に日本語化まで対応できる優れもの。
Eonasdan/bootstrap-datetimepicker

デモを見るだけでもワクワクしますね。
入れ方もたくさん用意されていていいですね。
今回もrails-assetsで導入します。

Gemfile
1
2
3
4

source 'https://rails-assets.org' do
  gem 'rails-assets-bootstrap-sass-official'
  gem 'rails-assets-eonasdan-bootstrap-datetimepicker'
end

bundle installしたら次はapp/assets/javascripts/application.jsに以下を記述。
日本語化する場合はmomentも一緒にいれます。

app/assets/javascripts/application.js
1
2
3
4

//= require bootstrap-sass-official
//= require moment
//= require moment/locale/ja
//= require eonasdan-bootstrap-datetimepicker

最後にcssの読み込み

app/assets/stylesheets/application.css.scss
1
2

@import "bootstrap-sass-official";
@import "eonasdan-bootstrap-datetimepicker";

これで設定は終了です。
あとはhtmlで

1

<input class="datetimepicker form-control" type="text">

とかやって

1
2
3
4
5
6

  $(".datetimepicker").datetimepicker({
    format: "YYYY/MM/DD HH:mm",
    showClear: true,
    showClose: true,
    locale: 'ja'
   });

とかやると日本語かされた時刻も選択可能なカレンダーがいい感じに表示されるはずです。

2014/04/25追記

ちなみに書式設定をいじれば時刻選択なしの日付のみのdatepickerとしても使えます。

1
2
3
4
5
6

  $(".datepicker").datetimepicker({
    format: "YYYY/MM/DD",
    showClear: true,
    showClose: true,
    locale: 'ja'
   });

非常にいいですね。

Comments