使用 simple_form 引导输入组包装器

Question

我将 simple_form 与 bootstrap 包装器一起使用，但不知道如何做到这一点。

我想生成这样的输入：

<div class="form-group string optional event_start_time_date ">
  <label class="string optional control-label" for="event_start_time_date">Start date</label>
  <div class="input-group date" id="date_picker">
    <input class="string required form-control" type="text" name="event[start_time_date]" id="event_start_time_date">
    <span class="input-group-addon">
      <span class="glyphicon glyphicon-calendar"></span>
    </span>
  </div>
</div>

我的包装看起来像这样：

config.wrappers :input_group, tag: 'div', class: 'form-group', error_class: 'has-error' do |b|
  b.use :label, class: 'control-label'
  b.wrapper :input_group_div, tag: 'div', class: 'input-group' do |ba|
    ba.use :input, class: 'form-control'
  end

  b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
  b.use :hint,  wrap_with: { tag: 'p', class: 'help-block' }
end

而对于

<%= f.input :start_time_date, as: :string, required: false, label: "Start date", wrapper: :input_group, :input_group_div_html {class: "date", id: "date-picker"} %>

它生成以下 html 输出：

<div class="form-group string optional event_start_time_date">
  <label class="string optional control-label" for="event_start_time_date">Start time</label>
  <div class="input-group date" id="date-picker">
    <input class="string optional form-control" type="text" name="event[start_time_date]" id="event_start_time_date">
  </div>
</div>

现在的区别：

1. <span class="input-group-addon"> 这是必需的，应该由包装器生成，但我不知道如何在包装器中生成它。
2. <span class="glyphicon glyphicon-calendar"></span> - 不同的输入组在这里会有不同的类和不同的跨度文本，最好是我可以将它作为某个选项传递 <%= f.input ...

Answer 1

您的包装器对我来说看起来相当不错，但是您视图中渲染字段的代码需要一些更改：

<%= f.input :start_time_date, as: :string, required: false, label: "Start date" do %>
  <%= f.input_field :start_time_date, class: "form-control" %>
  <span class="input-group-addon">
    <span class="glyphicon glyphicon-calendar"></span>
  </span>
<% end %>

通过将块传递到输入字段，您可以将日历图标添加到输入字段。辅助f.input_field方法呈现实际的输入字段，外部f.input用于匹配正确的包装器。

有关使用 simple_form 和 Bootstraps 输入组的更多信息和完整示例，您可以查看我的博客文章。