4
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

【Rails】date_selectのクラス指定

Last updated at Posted at 2020-05-18
1 / 2

#最初に
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

4
14
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
14

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?