date_select でつくるセレクトボックスを「年」「月」「日」で区切る

date型のデータについてdate_selectメソッドを使うと簡単にセレクトボックスをつくる

デフォルトでは下記のように年月日の区切りは空白です。

<div class="birth_date_field">
  <%= f.label :birth_date %>
  <%= f.date_select(
        :birth_date,
        start_year: 1930,
        end_year: (Time.now.year - 18),
        default: Date.new(1989, 1, 1)) %>
</div>

もう少し分かりやすくしたいなと思い、区切りにスラッシュを

年月日の区切りにスラッシュを入れる

<div class="birth_date_field">
  <%= f.label :birth_date %>
  <%= f.date_select(
        :birth_date,
        use_month_numbers: true,
        start_year: 1930,
        end_year: (Time.now.year - 18),
        default: Date.new(1989, 1, 1),
        date_separator: '/') %>
</div>

年月日を入れる

年月日の区切りに「年」「月」「日」を入れる

<div class="birth_date_field">
  <%= f.label :birth_date %>
  <%= raw sprintf(
            f.date_select(
              :birth_date,
              use_month_numbers: true,
              start_year: 1930,
              end_year: (Time.now.year - 18),
              default: Date.new(1989, 1, 1),
              date_separator: '%s'),
            '年 ', '月 ') + '日' %>
</div>

オプション	概要	書き方例
with_css_class	年月日それぞれでCSSを当てたい場合に利用。実際のCSSはyear,month,dayで指定が可能になる	with_css_classes:'任意のクラス名'
order	年月日の順番を変えたい場合に利用。表示させない場合でも必ず年月日全部書く必要あり	order:[:month,:year,:day]
use_month_numbers	月の表示を数字にしたい場合に利用	use_month_numbers:true
discard_year	年の表示を消したいときに利用	discard_year:true
discard_month	月の表示を消したいときに利用	discard_month:true
discard_day	日の表示を消したいときに利用	discard_day:true
disabled	プルダウンを選択不可にする	disabled:true
prompt	指定データがない場合の初期値表示(一番上の表示)に利用	prompt:"--"
selected	指定データがある場合の指定に利用	selected:Time.now(Date型変数ならOK)
start_year	プルダウンの一番上に来る年数を指定	start_year:Time.now.year start_year:2019
end_year	プルダウンの一番下に来る年数を指定	end_year:Time.now.year-10
end_year:1900
date_separator	年月日のフォームを分けた場合の中間に表示する値を指定。	date_separator:'%s'
date_separator:'/'

@ozackieeささん

https://qiita.com/ozackiee/items/3c027d07cdeb61df6029
Hatena Blog
https://blog.inouetakuya.info/entry/2014/01/31/233000