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

问题

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.

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

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

回答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.

回答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)

来源：https://stackoverflow.com/questions/8700418/how-to-wrap-every-select-of-date-select-with-a-div-in-rails

标签

ruby-on-rails-3

forms

html

wrapper