Materialize插件会中断日期和日期时间选择器

Question

我一直在解决以下问题...我有一个基本和功能的rails应用程序来记录事件,我使用脚手架来构建模型和所有,用户可以记录事件与他们的日期时间,一切正常.但是,只要我将"Materialise"添加到应用程序,它就会打破表单中的所有日期时间,日期和时间选择器.

在Materialise之后,我的表单中由Rails生成的datetime_selector根本不可操作,它们看起来很奇怪(包括截图)

- 如果我手动安装gem或者用bower安装它,就会发生这种情况.我知道,materialze为date_selectors提供了一个特殊的"datepicker"类.使用它没有任何区别.

- 我没有其他CSS应用于我的表单(我删除了所有scaffolds.css).如果我尝试手动应用材质设计样式,表单确实有效,但我不能使用Materialise.

有关为什么会发生这种情况以及如何解决问题的想法？

截图:

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

Answer 1

嘿! 所以我想出来了,我在这里发布这个问题给任何有同样问题的人.

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

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

在ERB中相当于:

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

我显然没有尝试,所以我被这个抛弃,直到我决定检查Materialize网站中的示例代码(我在下面列出的相关部分),并发现代码略有不同他们的指示......

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

在ERB中是:

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

和Voilà!! 日期选择器现在有效.