Question

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

这是我的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 -->

Answer 1

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

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

Answer 2

好的，我仔细阅读了API文档，看起来像date_select有date_select(method, options = {}, html_options = {})

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

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

Rails和HTML5：使date_select下拉列表看起来更好

2 个答案: