替换Rails表单字段

时间:2015-12-01 20:09:06

标签: javascript html ruby-on-rails

我正在学习RoR并将表单的文本框“映射”到数据模型的字符串类型的字段很简单:

<%= form_for(@user) do |f| %>
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  ....
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

但是,我有一个datetime类型字段(dob),默认表单控件包含五个我不喜欢的下拉列表,所以我想使用找到的基础-datetimepicker-rails gem here

脚手架为日期时间类型生成的原始代码如下:

<div class="field">
  <%= f.label :dob %><br>
  <%= f.datetime_select :dob %>
</div>

但是,我怎样才能将上面的内容替换为下面的javascript控件,以显示控件并将其链接到dob字段:

<input class="datetimepicker" type="text" >
<script type="text/javascript">$('.datetimepicker').fdatetimepicker()</script>

更新:根据Mike Desjardins的回答,datetimepicker功能正常并显示,但它位于现有内容之上。从下面的屏幕截图中,datetimepicker目前位于:

之上
<%= f.label :company_id %>

_form.html.erb

<%= form_for(@note) do |f| %>
  <div class="field">
    <%= f.label :date %><br>
    <%= f.text_field :date, :class => 'datetimepicker' %>
  </div>

  <div class="field">
    <%= f.label :company_id %><br>
    <%= f.select(:company_id, Company.order("name").map { |s| [s.name, s.id] }) %>
  </div>
  <div class="field">
    <%= f.label :contact %><br>
    <%= f.text_field :contact %>
  </div>

  <div class="actions">
    <%= f.submit %>
  </div>

  <%= link_to "home", root_path, { :class=>"button expand" } %>

  <script type="text/javascript">
    $(document).ready(function() {
      $('.datetimepicker').fdatetimepicker();
    });
  </script>
<% end %>

原始视图

original view

当前视图

current view

1 个答案:

答案 0 :(得分:1)

这样的事情会起作用吗?

<div class="field">
  <%= f.label :dob %><br>
  <%= f.text_field :dob, :class => 'datetimepicker' %>
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $('.datetimepicker').fdatetimepicker();
  });
</script>