Railsのdivでdate_selectを選択するたびにラップするには？

Question

私はRuby on Rails 3を使ってユーザーのためのフォームを作成しています。そこでは彼の誕生日を保存できます。コントローラーとモデルのすべての動作はうまく動作します。しかし、私はこのフォームのスタイリングに問題があります。

私のフォームで選択するたびに、それをスタイルに変換するためにdivを折り返します。普通はうまくいきます。 date_selectの問題は、すべてが1つのdivにラップされる3つの選択ボックスを生成することです。 HAMLの例としては、フィールドのためのコードは次のようになります。

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

.select_wrapperは、すべての3つの選択ボックスの周りのdivを作成しますが、私はそれ自身のラッパーを持っているすべての選択ボックスを必要としています。この問題を解決する方法はありますか？

ご協力いただければ幸いです。ありがとう。

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

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

Answer 3

これはきれいではありませんが、それは...私のためによく働い<div class="small-4 columns"></div>は、私はすべてがに包まれたいと思ったものだった

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

基本的には。 date_separatorが自分のタグのクローズと次のタグのオープンであることを確認し、最初のタグの開始がdate_selectより前で、最後のタグの終了がdate_selectの後であることを確認しました。

Answer 4

How to let custom FormBuilder wrap datetime_select's selects in e.g. a 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）です。 この例では、対応する日付フィールドをクラス "select"のdivにラップします。

• 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（本当の肉）

：

は参考のために、ここに関連するコードへのリンクです一緒にプレイするより多くのオプションがあります