お世話になっております。
プログラミング、railsとも初心者です。
scaffoldで作成した入力フォームで
日付を入力する際に、カレンダーで入力サポートする仕様
としたく、挑戦しております。
下記記事を参考にしました。
http://blog.hello-world.jp.net/javascript/1762/
ご教授お願いします。
(1)Gemfile の最終行に以下を追加してbundle install gem 'momentjs-rails' gem 'bootstrap3-datetimepicker-rails'
(2)app/assets/javascripts/application.js 最終行に以下をコピぺ //= require moment //= require bootstrap-datetimepicker var data = {'data-date-format': 'YYYY-MM-DD' }; $(function(){ $('.datepicker').attr(data); $('.datepicker').datetimepicker(); });
(3)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 */
(4)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の部分をクリックすることでカレンダーが表示されるようなりましたが、
2点問題があります。
ⅰ)ページ遷移した後、カレンダーが表示されない(リロード後に表示される)
ⅱ)表示カレンダ-が意図していないcssの影響をうけている(/app/assets/stylesheets/scaffolds.scssに記載したもの)
です。
(ⅰ)はTurbolinksが影響している?との記事を見ました(http://qiita.com/devzooiiooz/items/07d45af1c9f307e69061)が、jsの訂正方法がわかりません。
(ⅱ)は現在調査中です。私には同じidやclassを共有しているようには見えないのですが
以上、お心当たりがございましたら
ご教授お願い申し上げます。
回答1件
あなたの回答
tips
プレビュー