Rails 4 Bootstrap 3 日期时间选择器 - 日历不显示

Question

我正在创建一个新应用程序，除了选择约会日期外，一切正常。

我可以在那里输入日期作为字符串，但无法从日历中选择日期。

这是我的代码。

applicatiopn.html.erb

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title><%= content_for?(:title) ? yield(:title) : "My App" %></title>
    <meta name="description" content="<%= content_for?(:description) ? yield(:description) : "Levi''s Vet Clinic" %>">
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
  </head>
  <body>
    <div id="wrap">
          <div id="main" class="container clear-top">
        <%= render 'layouts/navigation' %>
        <div id="push">
          <%= render 'layouts/messages' %>
          <%= yield %>
        </div>
      </div>
    </div>
  </body>
  <footer class="footer">
    <%= render 'layouts/footer' %>
  </footer>
</html>

application.js

//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require moment
//= require bootstrap
//=require bootstrap-sprockets
//= require bootstrap-datetimepicker
//= require underscore
//= require_tree .

application.css

 *= require_tree .
 *= require_self

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";
@import 'bootstrap-datetimepicker';

_form.html.erb

<%= form_for(@appointment) do |f| %>
  <% if @appointment.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@appointment.errors.count, "error") %> prohibited this pet from being saved:</h2>

      <ul>
      <% @appointment.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
   ...
  <div class="row">
    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
      <%= f.label :appointment_date, "Appointment date" %>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
      <%= f.text_field :appointment_date, class: "datetimepicker", placeholder: "yyyy-mm-dd" %>
    </div>
  </div>

  <div class="actions">
    <%= f.button 'Submit', class: "btn btn-sm btn-info" %>
  </div>
<% end %>

<script type="text/javascript">
  $(function () {
    $('.datetimepicker').datetimepicker({
      pickTime: false,
      useCurrent: false,
      format: "YYYY-MM-DD",
      autoclose: true,
      todayBtn: true,
      todayHighlight: true,
      //todayBtn: 'linked',
      pickerPosition: "bottom-center",
      clearBtn: true
    });
  });
</script>

有什么线索可以使它正常工作吗？

Answer 1

将您的 javascript 代码移至 application.js 并更改它

$(document).on('click', function(){
  $('#datetimepicker').datetimepicker({
    ...
    ...
  });
});

在_form.html.erb

<div class="row">
  <div class="col-xs-8">
    <%= f.label :appointment_date, "Appointment date", class: 'control-label' %>
  </div>
  <div class="col-xs-4">
    <%= f.text_field :appointment_date, id: datetimepicker', class: 'form-control', placeholder: "yyyy-mm-dd" %>
  </div>
</div>

希望对你有所帮助！

Rails 4 Bootstrap 3 日期时间选择器 - 日历不显示

Rails 4 Bootstrap 3 Date Time Picker - calendar does not show up

ruby-on-rails

twitter-bootstrap-3

bootstrap-datetimepicker