如何在 rails 上将 bootstrap 日期选择器与 ruby 一起正确使用

Question

在我的 application.js 我添加了：

//= require jquery3
//= require jquery_ujs
//= require bootstrap
//= require bootstrap-datepicker

然后我在 app/helpers/application_helper.rb:

中添加了这个助手

def datepicker (form, field)
    form.text_field(field, data: {provide: "datepicker",
                                  'date-format': 'dd/mm/yyyy',
                                  'date-autoclose': 'true',
                                  'date-today-btn': 'linked',
                                  'date-today-highlight': 'true'}).html_safe
  end

这是我的表格：

<%= form_with(model: test, local: true) do |form| %>
  <% if test.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(myform.errors.count, "error") %> prohibited this test from being saved:</h2>

      <ul>
        <% test.errors.full_messages.each do |message| %>
          <li><%= message %></li>
        <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :test_name %>
    <%= form.text_field :test_name %>
  </div>

  <div class="field">
    <%= form.label :test_desc %>
    <%= form.text_field :test_desc %>
  </div>

  <div class="field">
    <%= form.label :test_expan %>
    <%= form.text_field :test_expan %>
  </div>

  <div class="field">
    <%= form.label :test_date %>
    <%= datepicker(form, :test_date) %>
  </div>

  <div class="field">
    <%= form.label :ci %>
    <%= form.text_field :ci %>
  </div>

  <div class="field">
    <%= form.label :test_complete %>
    <%= form.check_box :test_complete %>
  </div>

  <div class="field">
    <%= form.label :tester %>
    <%= form.text_field :tester %>
  </div>

  <div class="field">
    <%= form.label :test_other_cons %>
    <%= form.text_field :test_other_cons %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

我有一个巨大的表单，其中包含许多文本字段和复选框，但日期选择器显示在表单的末尾，而不是文本字段的正下方。我的意思是，我希望日历显示在文本字段的正下方，而不是在提交按钮之后。

我该如何着手解决这个问题？我在这里遗漏了什么吗？

此外，我在 Rails 5.2.1 上使用 Linux Mint 18.3，Ruby，我已经在 Chromiun 69.0.3497.81 和 Firefox 62.0 上测试过，两者其中一个是一样的。

Answer 1

这看起来更像是一个 CSS 问题而不是 Rails。您应确保已包含 bootstrap 和 bootstrap-datepicker 所需的所有 CSS 文件，这应该可以解决问题。检查项目中的 stylesheets/application.css 文件以获取当前包含的 css 个文件。

如何在 rails 上将 bootstrap 日期选择器与 ruby 一起正确使用

how to properly use bootstrap datepicker with ruby on rails

ruby

ruby-on-rails

twitter-bootstrap

bootstrap-datepicker