実現したいこと
今の状況
参考元リンク先の記事を参考に実装しました。
しかし、いざサーバーを立ち上げるとスクショのようにはならず、タップしてもテキストフィールドしか表示されません。
そのため、私なりに色々と試したところ、イメージとは異なるカレンダーまでは実装することができましたが意図しているイメージとは異なるのでBootstraoに詳しい方がいましたらご教授願いたいです。
application.js
1// This is a manifest file that'll be compiled into application.js, which will include all the files 2// listed below. 3// 4// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, or any plugin's 5// vendor/assets/javascripts directory can be referenced here using a relative path. 6// 7// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the 8// compiled file. JavaScript code in this file should be added after the last require_* statement. 9// 10// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details 11// about supported directives. 12// 13//= require rails-ujs 14//= require activestorage 15//= require turbolinks 16//= require_tree . 17 18//= require moment 19//= require bootstrap-datetimepicker 20 21 22var data = {'data-date-format': 'YYYY-MM-DD hh:mm:ss' }; 23$(function(){ 24 $('.datetimepicker').attr(data); 25 $('.datetimepicker').datetimepicker(); 26});
application.css
1*= require bootstrap 2*= require bootstrap-datetimepicker
top.html.erb
1<%= form_with do |f| %> 2 <div class='input-group date datetpicker'> 3 <%= f.date_field :date %> 4 <%= f.label :日付 %> 5 <%= f.text_field :created_at, :class => 'datepicker' %> 6 <span class="input-group-addon"> 7 </div> 8<% end %>
あなたの回答
tips
プレビュー