Как обернуть каждый выбор date_select с div в Rails? - PullRequest
Новая
       13

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

11 голосов
/ 02 января 2012

Я использую 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 вокруг всех трех блоков выбора, но мне нужно, чтобы у каждого блока выбора была своя оболочка. Есть ли способ решить эту проблему?

Любая помощь будет оценена. Благодаря.

Ответы [ 4 ]

9 голосов
/ 02 января 2012

Метод 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">');
8 голосов
/ 11 февраля 2015

Я использую решение с параметром :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">'
5 голосов
/ 03 марта 2015

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

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

0 голосов
/ 23 февраля 2018

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

JavaScript не подходит для меня, и взлом date_separator это ... взлом:)

Я придумал следующее решение (у меня работает, в HAML). Я думаю, что это пока что самое чистое решение, но опирается на некоторые внутренние компоненты 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».

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

...