Question

我正在创建一个新的应用程序，除了选择预约日期之外，一切运作良好。

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

这是我的代码。

applicatiopn.html.erb

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

的application.js

 *= require_tree .
 *= require_self

application.css

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

custom.css.scss

<%= 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>

_form.html.erb

{{1}}

我有什么想法可以让它发挥作用吗？

Answer 1

在application.js中移动您的javascript代码并进行更改

$(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日期时间选择器 - 日历未显示

1 个答案: