Materialize plugin breaks date and datetime selectors - ruby-on-rails

Question

I've been breaking my head with the following problem... I have a basic and functional rails app to record events, I used scaffolds to build the model and all, users can record events with their datetime, everything works. However, as soon as I add "Materialize" to the app, it breaks all the datetime, date, and time selectors in forms.
After Materialize, the datetime_selector generated by Rails in my form just aren't actionable at all and they seem weird (Screenshots included)
– This happens if I install the gem manually or if I install it with bower. I am aware that materialze has a special "datepicker" class for date_selectors. Using this makes no difference.
– I have no other CSS being applied to my form (I removed all scaffolds.css). If I try applying material design styles manually, the forms do work, but I can't use Materialize then.
Any thoughts on why this happens and how to fix it?
Screenshots:
<%= 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

Hey! So I figured it out and I'm posting this here for anyone who has the same problem.
If you use Materialize with a f.date_select in rails, it simply renders some unusable pixels on your view. Materialize documentation does mention that they use a special class for a date selector class="datepicker". And so the Materialize documentation mentions the following usage for plain html:
<input type="date" class="datepicker">
Which in ERB is equivalent to:
<%= f.date_select :date, class: "datepicker"%>
Which I obviously tried to no avail, and so I was thrown off by this, until I decided to inspect the code (the relevant part of which I list below) for the example in the Materialize website and found the code to be slightly different to their instructions...
<input type="text" class="datepicker"> #Notice the input type
which in ERB is:
<%= f.text_field :date, class: "datepicker"%>
And Voilà!! the date selector now works.

Answer 2

I would add to Carlos answer this, remember to initialize the Javascript using:
$('.datepicker').pickadate({
selectMonths: true, // Creates a dropdown to control month
selectYears: 15 // Creates a dropdown of 15 years to control year});
And for the form:
<%= f.text_field :date_in, class:"datepicker" %>
Hope it helps! this still working in materialize-sass (0.97.6)

Answer 3

I ran into this issue also. For some reason, the datetime select objects were set to display: none after adding materialize CSS
Here is my workaround. Add your own class around the datetime form
<div class="datetime">
<%= f.label :time %><br>
<%= f.datetime_select :time %><br>
</div>
Then declare your own CSS in your application.css file
.datetime select {
display: inline-flex;
width: auto;
}