Как обернуть каждый выбор date_select с помощью div в Rails?

Я использую Ruby on Rails 3 для создания формы для пользователя, где он может сохранить свою дату рождения. Все действия вокруг контроллера и модели работают нормально. Но у меня проблемы с оформлением этой формы.

Для каждого выбора в моих формах я обертываю div вокруг него, чтобы его стилизовать, что нормально работает нормально. Проблема с date_select заключается в том, что она генерирует три блока выбора, которые все обернуты в один div. В качестве примера в Haml код для поля выглядит следующим образом:

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

.select_wrapper создает div вокруг всех трех полей выбора, но мне нужно, чтобы в каждом окне выбора была собственная оболочка. Есть ли способ решить эту проблему?

Любая помощь будет оценена по достоинству. Спасибо.

Ответ 1

Метод 1 (сложный)

Отмените код date_select, чтобы обработать этот специальный экземпляр для вас: https://github.com/rails/rails/blob/master/actionview/lib/action_view/helpers/date_helper.rb#L283

Метод 2 (простой)

Использовать 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

Я использую решение, включающее параметр :date_separator. Что-то вроде этого:

.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

Это не самый красивый, но он хорошо сработал у меня...

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

Где <div class="small-4 columns"></div> было то, что я хотел, чтобы все было обернуто. В основном просто убедитесь, что date_separator был закрытием моего тега и открытием моего следующего, и убедился, что открытие моего первого тега было раньше date_select и закрытие моего последнего тега были после date_select.

Ответ 4

В Как разрешить настраиваемый FormBuilder обернуть выбор datetime_select, например. div? В основном я сталкиваюсь с той же проблемой.

JavaScript не является для меня вариантом, а date_separator hack - это... хак:)

Я придумал следующее решение (работает для меня, в HAML). Я думаю, что это решение cleanest, но полагается на некоторые внутренние элементы Rails.

- 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

Все, что вам нужно сделать, - отредактировать prefix (@usage в моем случае) и field_name (имя атрибута, @usage.starttime/starttime в моем случае). В этом примере я обертываю соответствующие поля даты в div класса "select".

Для справки, есть еще много вариантов для игры, вот ссылки на соответствующий код:

https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/tags/date_select.rb (FormBuilders будут использовать этот путь)
https://github.com/rails/rails/blob/2c97fbf6503c9199f3fe5ed06222e7226dc6fcd9/actionview/lib/action_view/helpers/date_helper.rb (реальное мясо)