【Rails】date_selectのクラス指定

最初に

hamlでdate_selectを使用した際クラスを付与できなかったため、クラス指定の仕方を備忘録として残します。

date_selectとは

https://gyazo.com/29cf6b960c4c2391a24e70069a9d8659
こんな感じでドロップダウン形式の生年月日のフォームを自動で生成してくれるのがdate_select。

ちなみにデフォルトだとこんな感じ。
https://gyazo.com/4100a51de9a365f337e142bad0d7507b

最初form_forのselect_boxを使用しており、年、月、日と3つフォームを生成してオプションつけて、データをまとめて保存する様にして、、、と生年月日のフォームを実装するまでに時間がかかったため、
早く知っておきたかった。。（泣）
https://gyazo.com/0bd5ca777d38932db77858cd64f87448
今後はこの便利すぎるdate_selectを使用していきます。

使用方法

collection_select(オブジェクト名, メソッド名, 要素の配列, value属性の項目, テキストの項目 [, オプション or HTML属性 or イベント属性])

手順

1.コードの記載（今回はコントローラーで＠adreess変数に空のハッシュを代入済み、カラムはbirthdayを想定します。）

html.haml

= form_for (@address) do |f|
  = f.date_select :birthday

これでフォーム自体は使用できます。

2.オプションの追加

html.haml

= form_for (@address) do |f|
  = f.date_select :birthday, use_month_numbers: true, start_year: 1970, end_year: Time.now.year, prompt:"--"

use_month_numbers: true,　→　月の表示を数字に。デフォルトだと英語表記。

start_year: 1970,　→　選択肢として何年からスタートするかを指定。デフォルトだと10年前からになる。

end_year: Time.now.year,　→　選択肢の終わりの年を現在に指定。

prompt:"--"　→　セレクトボックスのデフォルトで表示される文字を”ーー”に指定。デフォルトだと現在の日付が適用される。（これ個人的におすすめ！）

3.クラスの指定

html.haml

= form_for (@address) do |f|
  = f.date_select :birthday, use_month_numbers: true, start_year: 1970, end_year: Time.now.year, prompt:"--", class:"main__box__bottom__content__group3__box__barthday__box"

これでクラスの付与完了！と思いきや、cssが反応しない。検証で調べてみるとクラスが指定されていないということがわかった。最初これでなぜクラスが当たらないのか謎でした。
ソースコードを調べてると、option(use_month_numbers:やprompt：)は第3引数に設定し、html_options(classなどのhtml/css)は第4引数に設定するようです。
https://railsdoc.com/form
要は指定する場所が決められているということで、上記の場合だと第3引数でクラス指定をしていることになり反映されなかったのが原因です。

なので第3引数と第4引数を{}で別々に括ると、

html.haml

= form_for (@address) do |f|
  = f.date_select :birthday, {use_month_numbers: true, start_year: 1970, end_year: Time.now.year, prompt:"--"},
{class:"main__box__bottom__content__group3__box__barthday__box"}

これでクラスが付与されました！
ちなみにオプションなし、クラスのみ指定（第4引数のみ指定）したい場合は、

html.haml

= f.date_select :birthday, {},　{class:"main__box__bottom__content__group3__box__barthday__box"}

カラムと第4引数の間に空の{}を設けることによりクラスが付与されます！

参考文献

・https://railsdoc.com/form
・https://qiita.com/nakanoyoshiki/items/e87a6238f8febbeb208a