徒然なるままに

学習メモがメインです

bootstrap3-datetimepicker導入

引き続きWebアプリを作成中です。

日付と時刻をGUIで入力できる様に、bootstrap3-datetimepickerというgemの導入方法を記載します。

自分の環境

導入手順

Gemfileに以下のgemを追加

 gem 'bootstrap3-datetimepicker-rails'

bundle installでgemインストール

bundle install 

/app/assets/stylesheets/custom.scss

...(略)
@import 'bootstrap-datetimepicker';

/app/assets/javascripts/application.css

/*
...(略)
 *= require bootstrap-datetimepicker
*/

/app/assets/javascripts/application.js

...(略)
//= require bootstrap-datetimepicker

$(’.Ymd’).datetimepicker({format : 'YYYY/MM/DD'});
$('.Hm').datetimepicker({format : 'HH:mm'});
※.Ymdと.Hmは自分の環境によってidまたはclassを指定してください。

結果

  • 年月日
    f:id:tagoaskubeya:20190901110753p:plain

  • 時分
    f:id:tagoaskubeya:20190901110757p:plain

注意点

  • bootstrap4には対応しておらず、bootstrap3まで対応していると思われます。

参考にさせていただいたページ

https://github.com/TrevorS/bootstrap3-datetimepicker-rails