【rails】プルタブ式の生年月日フォームを簡単に追加するDay6

今日もお疲れ様です。今日はhtmlのパーツの配置とdeviseでユーザー登録機能を導入していました。今回は下写真のようにプルタブ式の”生年月日”を追加で実装するrailのヘルパーメソッド「f.date_select」について、簡易的にまとめます。

生年月日をテーブルに登録できるようにする

顧客に入力してもらった生年月日をデータベースに登録する場合はお読みください。やり方は結論から言って、マイグレートファイルにカラムを追記し、生年月日データを受けと取れるようにする必要があります。記述方法は以下

〇〇〇〇〇〇〇〇_create_テーブル名.rb

t.date :birthday

注意点ですが、記述する前に「rails db:migrate:status」でマイグレートファイルがdownしていることを確認してから記述してください。

htmlへの記述の仕方

全体像が以下のようになります。

sample.html.erb

<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
  <div class="field">
    <%= f.label :birthday, "生年月日" %><br>
    <%= f.date_select :birthday, {start_year: 1950, end_year: 2016,
    include_blank: true, use_two_digit_numbers: true},
    {class: "input-tab birthday-select"}%>
  </div>
<%end%>

今回のテーマの生年月日プルタブのところを抽出すると以下のようになります。

here

<%= f.date_select :birthday, {start_year: 1950, end_year: 2016,
    include_blank: true, use_two_digit_numbers: true},
    {class: "input-tab birthday-select"}%>

「:birthday」がカラムの名前。「start_year: 1950, end_year: 2016」がプルタブの範囲の指定（この記述だと1950年1月1日から2016年12月31日までのいづれかを選択できる）。「include_blank: true」はプルタブがあるページを訪れた時の、プルタブのデフォルトでの入力を空欄にするためのもの。「use_two_digit_numbers: true」が1桁の月や日付をテーブルに登録する場合には、頭に０をつけて2桁にしてくれるもの（例：2000年2月1日⇨2000-02-01、1951年4日12日⇨1951-04-12）。

その他追加できる機能として、日付だけのプルタブや、逆に年だけを選択するプルタブなども作れます。気になる方は是非下の参考サイトに立ち寄ってみてください。

参考サイト

↑見方がわかると便利なサイト