railsにカレンダーDateTimePickerの導入

お世話になっております。
プログラミング、railsとも初心者です。

scaffoldで作成した入力フォームで
日付を入力する際に、カレンダーで入力サポートする仕様
としたく、挑戦しております。

下記記事を参考にしました。
http://blog.hello-world.jp.net/javascript/1762/

ご教授お願いします。

（１）Gemfile の最終行に以下を追加してbundle install
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' };
$(function(){
  $('.datepicker').attr(data);
  $('.datepicker').datetimepicker();
});

（３）app/assets/stylesheets/application.css 最終行に以下をコピぺ
*= require bootstrap-datetimepicker
コピペ後、こんな感じ
/*
 * This is a manifest file that'll be compiled into application.css, which...
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/asset...
 *~途中省略・・
 *= require_tree .
 *= require_self
 *= require bootstrap-datetimepicker
 */

（４）viewの_form.html.erbを編集
編集前 
～
 <div class="field">
 <%= f.label :date %><br>
 <%= f.text_field :date %>
 </div>
~
編集後 
～
<div class="field">
    <%= f.label :date %><br>
    <%= f.text_field :date, :class => 'datepicker' %>
</div>
~

上記のように変更しました。
(2)(3)のコピペ部分がコメントアウトのようになるのが気にかかっていたのですが、
そのような文法だと把握しました。

現在(4)を修正し、
f.text_fieldの部分をクリックすることでカレンダーが表示されるようなりましたが、
２点問題があります。
ⅰ）ページ遷移した後、カレンダーが表示されない（リロード後に表示される）
ⅱ）表示カレンダ－が意図していないcssの影響をうけている（/app/assets/stylesheets/scaffolds.scssに記載したもの）
です。

(ⅰ)はTurbolinksが影響している？との記事を見ました（http://qiita.com/devzooiiooz/items/07d45af1c9f307e69061）が、jsの訂正方法がわかりません。
(ⅱ)は現在調査中です。私には同じidやclassを共有しているようには見えないのですが

以上、お心当たりがございましたら
ご教授お願い申し上げます。

gouf

2015/10/13 11:50

うまくいかない、というのはどんなところですか、何が想定と違うのですか

koppe1989

2015/10/15 11:02

gouf様またよろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

javascript
1var data = {'data-date-format': 'YYYY-MM-DD' };
2$(function(){
3  $('.datepicker').attr(data);
4  $('.datepicker').datetimepicker();
5});

を

javascript
1var data = {'data-date-format': 'YYYY-MM-DD' };
2var ready = function(){
3  $('.datepicker').attr(data);
4  $('.datepicker').datetimepicker();
5};
6
7$(document).ready(ready);
8$(document).on('page:load', ready);