Rails 和 HTML5：让 date_select 下拉菜单看起来更好答案

【问题标题】：Rails and HTML5: Making date_select dropdowns look betterRails 和 HTML5：让 date_select 下拉菜单看起来更好
【发布时间】：2017-10-26 19:25:27
【问题描述】：

有没有办法让月份和年份的下拉菜单看起来像它们更厚的输入字段？

这是我的 Rails 代码，它是部分代码的一部分。我在输入字段上使用了表单控件，但看起来它在这些下拉列表中效果不佳。

<div class="new_cert"> 

  <div class="field">
    <%= ff.label :certification_name, 'Certification Title' %>
    <%= ff.text_field :certification_name, class: "form-control" %>       
  </div>
  <div class="field">
    <%= ff.label :certification_authority %>
    <%= ff.text_field :certification_authority, class: "form-control" %>       
  </div>
  <div class="field">
    <%= ff.label :certification_number %>
    <%= ff.text_field :certification_number, class: "form-control" %>       
  </div>

  <table>
    <tr>
      <td>
      <div class="field">
        <%= ff.label :certification_from, "From" %><br />
        <%= ff.date_select :certification_from, :order => [:day, :month, :year],
            :start_year => Date.current.year, :end_year => 1960,
            :prompt => {day: 'Day', month: 'Month', year: 'Year'}, :discard_day => true, class: 'form-control' %>
      </div>     
      </td>
      <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
      <td>
      <div class="field">
        <%= ff.label :certification_to, "To" %><br />
        <%= ff.date_select :certification_to, :order => [:day, :month, :year], 
            :start_year => Date.current.year + (10), :end_year => 1960,
            :prompt => {day: 'Day', month: 'Month', year: 'Year'}, :discard_day => true, class: 'form-control'  %>            
      </div>        
      </td>
    </tr>
  </table>  

  <div>
    <%= ff.label :cert_never_expires, "This certification does not expire", class: "l" %>
    <%= ff.check_box :cert_never_expires, class: 'cb' %>
  </div>
  <br />

</div><!-- ./new_cert -->

这是表格

 <%= form_for(@user) do |f| %>

    <%= f.fields_for :achievements, Achievement.new do |ff| %>

      <!-- a partial is rendered based on the user dropdown selection -->    
      <div id="cert">
        <%= render partial: "achievements/new_certification", locals: { ff: ff } %>
      </div>

    <% end %><!-- fields_for -->

    <%= f.submit 'Save', id: "submit-achievement", class: 'btn btn-primary form-control' %>

  </div><!-- modal body -->

    <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    </div>

  <% end %><!-- form_for -->

【问题讨论】：

您是否尝试向您的选择标签添加其他类并增加它们的填充？

标签： ruby-on-rails html twitter-bootstrap

【解决方案1】：

您可以做很多事情。如果您只是希望基本选择选项看起来像使用 Bootstrap 的其他输入，那么使用 form-control 类是正确的。但是，您需要在 ff.date_select 中使用 input_html: { class: 'form-control' } 才能真正显示课程。

要获得更深入的样式，请尝试 Select2：https://github.com/argerim/select2-rails

【讨论】：

谢谢，但它不起作用。我没有使用 Simple_Form gem，不确定这是否重要？我在其他下拉菜单上使用了 class: form-control 没有问题，不知道为什么 date_select 似乎没有应用它。
您使用的是什么表单类型？只是普通的form_for 或semantic_form_for？您是否尝试过像html_options: {class: 'form-control'} 一样包装类？这是另一种方法。 date_select，是通用 rails date_select 还是你自定义的？
是的，我尝试像您建议的那样添加 html_options: {class: 'form-control'} 代替 class: 'form-control' 但我得到了相同的结果。 date_select 未自定义。如果您想查看，我将表格添加到上面的帖子中。谢谢

【解决方案2】：

好的，我在阅读 API 文档后发现它看起来像 date_select 有 date_select(method, options = {}, html_options = {})

所以我所要做的就是像这样将选项部分包裹在省略号 {} 中

  <div class="field">
    <%= ff.label :certification_to, "To" %><br />
    <%= ff.date_select :certification_to, { :order => [:day, :month, :year], 
        :start_year => Date.current.year + (10), :end_year => 1960,
        :prompt => {day: 'Day', month: 'Month', year: 'Year'}, :discard_day => true }, class: 'form-control'  %>
  </div>

【讨论】：