How to wrap every select of date_select with a div in Rails?

Question

I\'m using Ruby on Rails 3 to create a form for the user, where he can save his birthdate. All the actions around the controller and model work just fine. But I\'m having tr

Answer 1

I had a similar problem but I wanted each select box to have its own class.

Here's what I did (using ERB not HAML):

<%= select_month(@person.birthday, field_name: "birthday(2i)", prefix: "person", prompt: true) %>
<%= select_day(@person.birthday, field_name: "birthday(3i)", prefix: "person", prompt: true) %>
<%= select_year(@person.birthday, field_name: "birthday(1i)", prefix: "person", start_year: Date.today.year, end_year: 1905, prompt: true) %>

Then I was able to wrap each in a div with the proper class but you could also add classes directly to the select tags like this:

<%= select_month(@person.birthday, {field_name: "birthday(2i)", prefix: "person", prompt: true}, class: "class_name") %>

Answer 2

In How to let custom FormBuilder wrap datetime_select's selects in e.g. a div? I basically face the same problem.

JavaScript is not an option for me and the date_separator hack is ... a hack :)

I came up with the following solution (works for me, in HAML). I think it is the cleanest solution so far but relies on some Rails internals.

- date_time_selector = ActionView::Helpers::DateTimeSelector.new(Time.current,
            { prefix: @usage.model_name.param_key,
              field_name: :starttime.to_s,
              include_position: true })
.select
  = date_time_selector.select_year
.select
  = date_time_selector.select_month
.select
  = date_time_selector.select_day
.select
  = date_time_selector.select_hour
.select
  = date_time_selector.select_minute

All you have to do is adjust the prefix (@usage in my case) and the field_name (Attribute-name, @usage.starttime / starttime in my case). In this example, I wrap the corresponding date fields in a div of class "select".

For reference, there are many more options to play with, here are links to the relevant code:

• https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/tags/date_select.rb (FormBuilders will use this path)
• https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/date_helper.rb (the real meat)

Answer 3

Method 1 (Difficult)

Override the date_select code to handle this special instance for you: https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/date_helper.rb#L283

Method 2 (Easy)

Use jQuery:

// Find all select boxes that have an ID attribute containing "birthday"
// and wrap a div tag around them with a certain class
$('select[id*="birthday"]').wrapAll('<div class="select_wrapper">');

Answer 4

This is not the prettiest, but it worked well for me ...

<div class="small-4 columns"><%= f.date_select :release_date, {date_separator: "</div><div class='small-4 columns'>"} %></div>

Where <div class="small-4 columns"></div> was what I wanted everything to be wrapped in. Basically just made sure that the date_separator was the closing of my tag and the opening of my next one, and made sure that the opening of my first tag was before the date_select and the closing of my last tag was after the date_select.

Answer 5

I am using a solution involving the parameter :date_separator. Something along the lines of this:

.select-wrapper
  = f.date_select :birthday, :start_year => Time.now.year - 120, :end_year => Time.now.year, :date_separator => '</div><div class="select-wrapper">'