我正在使用带引导包装器的simple_form,并且无法弄清楚,如何执行此操作。
我想生成这样的输入:
<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>
现在存在差异:
<span class="input-group-addon">
这是必需的,应该由包装器生成,但我不知道如何在包装器中生成它。<span class="glyphicon glyphicon-calendar"></span>
- 不同的输入组在这里将有不同的类和不同的范围文本,如果我可以将其作为<%= f.input ...
答案 0 :(得分:0)
你的包装器看起来对我很好,但你视图中用于渲染字段的代码需要进行一些更改:
<%= 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输入组一起使用的更多信息和竞争示例,您可以查看我的blog post。
答案 1 :(得分:0)
同样的问题解决了这个问题。
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'
ba.wrapper tag: 'span', class: 'input-group-addon' do |append|
ba.wrapper tag: 'span', class: 'glyphicon glyphicon-calendar' do |i|
end
end
end
b.use :error, wrap_with: { tag: 'span', class: 'help-block' }
b.use :hint, wrap_with: { tag: 'p', class: 'help-block' }
end
答案 2 :(得分:0)
您只需在&lt;%= f.input%&gt;之间添加一个div即可。和&lt;%f.input_field%&gt;。工作正常:
<%= f.input :start_time_date, as: :string, required: false, label: "Start date" do %>
<div class="input-group">
<%= f.input_field :start_time_date, class: "form-control" %>
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<% end %>
答案 3 :(得分:0)