Materialize 插件破坏了日期和日期时间选择器答案

【问题标题】：Materialize plugin breaks date and datetime selectorsMaterialize 插件破坏了日期和日期时间选择器
【发布时间】：2015-10-06 04:29:43
【问题描述】：

我一直在为以下问题而烦恼...我有一个基本的功能性 Rails 应用程序来记录事件，我使用脚手架来构建模型等等，用户可以使用他们的日期时间记录事件，一切正常。 但是，一旦我将“Materialize”添加到应用程序中，它就会破坏表单中的所有日期时间、日期和时间选择器。

在 Materialize 之后，Rails 在我的表单中生成的 datetime_selector 根本无法操作，而且看起来很奇怪（包括屏幕截图）

– 如果我手动安装 gem 或使用 bower 安装它，就会发生这种情况。我知道 materialze 有一个用于 date_selectors 的特殊“datepicker”类。使用它没有区别。

– 我没有将其他 CSS 应用到我的表单（我删除了所有的脚手架.css）。如果我尝试手动应用材料设计样式，表单确实有效，但我不能使用 Materialize。

关于为什么会发生这种情况以及如何解决它的任何想法？

截图：

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

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

  <div class="field">
    <%= f.label :title %><br>
    <%= f.text_field :title %>
  </div>
  <div class="field">
    <%= f.label :datetime %><br>
    <%= f.datetime_select :datetime, class: "datepicker" %>
  </div>
  <div class="field">
    <%= f.label :date %><br>
    <%= f.date_select :date, class: "datetimepicker-rails" %>
  </div>
  <div class="field">
    <%= f.label :time %><br>
    <%= f.time_select :time %>
  </div>
  <div class="field">
    <%= f.label :address %><br>
    <%= f.text_field :address %>
  </div>
  <div class="field">
    <%= f.label :cost %><br>
    <%= f.text_field :cost %>
  </div>
  <div class="field">
    <%= f.label :category %><br>
    <%= f.text_field :category %>
  </div>
  <div class="field">
    <%= f.label :tags %><br>
    <%= f.text_field :tags %>
  </div>
  <div class="field">
    <%= f.label :image %><br>
    <%= f.text_field :image %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

【问题讨论】：

您是否按照 Gem 文档中的所有 sass 说明进行操作？ github.com/mkhairi/materialize-sass
感谢您的回复@TomFast，我确实完全按照他们的要求进行操作。我也尝试过使用 *=require 将其设为 CSS 而不是 SASS，但结果相同。

标签： ruby-on-rails ruby-on-rails-4 materialize

【解决方案1】：

嘿！所以我想通了，我把这个贴在这里给有同样问题的人。

如果您在 rails 中使用带有 f.date_select 的 Materialize，它只会在您的视图上呈现一些不可用的像素。 Materialize 文档确实提到他们使用一个特殊的类作为日期选择器class="datepicker"。因此，Materialize 文档提到了纯 html 的以下用法：

 <input type="date" class="datepicker">

在ERB中相当于：

 <%= f.date_select :date, class: "datepicker"%>

我显然尝试无济于事，所以我被这个抛弃了，直到我决定检查 Materialise 网站中示例的代码（我在下面列出的相关部分）并发现代码是与他们的指示略有不同...

 <input type="text" class="datepicker"> #Notice the input type

在 ERB 中是：

    <%= f.text_field :date, class: "datepicker"%>

Voilà!! 日期选择器现在可以工作了。

【讨论】：

但是f.datetime_select 有什么办法让它工作吗？因为它实际上为 month、day、year、小时和分钟。

【解决方案2】：

我会在 Carlos 中回答这个问题，记得使用以下方法初始化 Javascript：

$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year});

对于表格：

<%= f.text_field :date_in, class:"datepicker" %>

希望对您有所帮助！这仍然适用于 materialize-sass (0.97.6)

【讨论】：

【解决方案3】：

我也遇到了这个问题。由于某种原因，添加具体化 CSS 后，日期时间选择对象被设置为 display: none

这是我的解决方法。在日期时间表单周围添加您自己的类

<div class="datetime">
    <%= f.label :time %><br>
    <%= f.datetime_select :time %><br>
 </div>

然后在你的 application.css 文件中声明你自己的 CSS

.datetime select {
    display: inline-flex;
    width: auto;
}

【讨论】：