Geek Answers Handbook

Bootstrap-insert-shell-group with simple_form

I use simple_form with bootstrap wrappers and can't figure out how to do this.

I want to generate input as follows:

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

My cover is as follows:

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

And for

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

It generates below html output:

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

Now the differences:

  • <span class="input-group-addon"> this is required and must be generated by the shell, but I do not know how to generate it in the shell.
  • <span class="glyphicon glyphicon-calendar"></span> - different input groups will have a different class here and different range text, it is better if I could pass it as some option in <%= f.input ...
+4
source share
3 answers

, :

<%= 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 .

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
0

div <% = f.input% > <% f.input_field% > . :

  <%= 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 %>
0

More articles:


All Articles