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 trouble with the styling of this form.

For every select in my forms I wrap a div around it, to style it, which normally works just fine. The problem with date_select is that it generates three select boxes which all get wrapped into one div. As example in Haml the code for the field looks like this:

.select-wrapper
  = f.date_select :birthday, :start_year => Time.now.year - 120, :end_year => Time.now.year

The .select_wrapper creates a div around all three select boxes but I need every select box to have it's own wrapper. Is there any way to solve this issue?

Any help would be appreciated. Thanks.

Consist

Thanks for the hint. I forget to answer some questions, where I found solutions my own and now wrote and accepted the answer I found and used, so my rate should be fine again. – Consist

Answer 1

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">');

Girish

The normal "wrap" method didn't work, but I got it going with wrapAll, so thanks for the help. – Consist

The link is not valid anymore. – Troat

@Troat Updated. Please feel free to edit any post to fix an issue in the future. – Girish

Answer 2

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

Ogrady

Answer 3

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.

Beaver

Answer 4

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)

Disconformity

Answer 5

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") %>

Hayleyhayloft