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.

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