誕生日入力フォーム作成メモ

• deviseでbirthdayカラムを追加する場合は下記の様にdate型のbirthdayカラムを追加する。

マイグレーションファイル

# frozen_string_literal: true

class DeviseCreateUsers < ActiveRecord::Migration[5.2]
  def change
    create_table :users do |t|
      ## Database authenticatable
      t.string :nickname, null: false
      t.string :email,              null: false, default: ""
      t.string :encrypted_password, null: false, default: ""
      t.date :birthday, null: false



      ## Recoverable
      t.string   :reset_password_token
      t.datetime :reset_password_sent_at

      ## Rememberable
      t.datetime :remember_created_at

      ## Trackable
      # t.integer  :sign_in_count, default: 0, null: false
      # t.datetime :current_sign_in_at
      # t.datetime :last_sign_in_at
      # t.string   :current_sign_in_ip
      # t.string   :last_sign_in_ip

      ## Confirmable
      # t.string   :confirmation_token
      # t.datetime :confirmed_at
      # t.datetime :confirmation_sent_at
      # t.string   :unconfirmed_email # Only if using reconfirmable

      ## Lockable
      # t.integer  :failed_attempts, default: 0, null: false # Only if lock strategy is :failed_attempts
      # t.string   :unlock_token # Only if unlock strategy is :email or :both
      # t.datetime :locked_at


      t.timestamps null: false
    end

    add_index :users, :email,                unique: true
    add_index :users, :reset_password_token, unique: true
    # add_index :users, :confirmation_token,   unique: true
    # add_index :users, :unlock_token,         unique: true
  end
end

• 諸々のdeviseの設定は端折るとして、deviseのsign_up用ビューファイルで誕生日入力フォームを下記の様に作成する。

app/views/devise/registrations/new.html.haml

        .form__birthday
          = raw sprintf(f.date_select(:birthday, prompt:"--",use_month_numbers: true, start_year:Time.now.year,end_year:(1900),date_separator:'%s'), '年 ', '月 ') + '日' 
          = icon 'fas', 'chevron-down',class:"user-sign__form__field--birthday__icon1"
          = icon 'fas', 'chevron-down',class:"user-sign__form__field--birthday__icon2"
          = icon 'fas', 'chevron-down',class:"user-sign__form__field--birthday__icon3"

• セレクトボックスのデザインを整える。

scss

      .form__birthday {
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        & select {
          border: 1px;
          border-radius: 8px;
          outline: none;
          padding: 10px;
          width: 80px;
          height: 46px;
          appearance: none;
          -webkit-appearance: none;
          -moz-appearance: none;
          &:focus {
            box-shadow:0 0 0 2px pink;
          }
        }
        & i {
          position: absolute;
          top: 16px;
          color: #888888;
        }
        &__icon1 {
          left: 60px;
          }
        &__icon2 {
          left: 176px;
        }
        &__icon3 {
          left: 292px;
        }
      }

date_select各部の意味合いについて

// フォームの最初の表示を--にしてくれます。
prompt:"--"

// 月を数字で表示してくれます。
use_month_numbers: true

// 選択する年の始めと最後を指定出来ます。
start_year:Time.now.year
end_year:(1900)

// フォームの横に「年」、「月」、「日」を表示してくれます。
date_separator:'%s'), '年 ', '月 ') + '日'