Rails7でのf.date_select, f.datetime_selectのオプションやパラメーター（params）の受け渡し方


[株式会社TECH LUCK](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)という会社で代表兼エンジニアをしている齊藤です。

DXプロジェクト、開発プロジェクト、Rails開発などでお困りごとがありましたら[弊社HP](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)からご相談をいただけますと幸いです。
以下のような問題を解決することができます。
- プロジェクトでRailsエンジニアが足りなくて困っている
- Railsのバージョンアップをしたいがノウハウ・リソースが足りなくて困っている
- オフショア開発をしているが、要件の齟齬やコード品質が悪いので改善したい

また、Railsエンジニアも募集しておりますので、興味がありましたら[弊社HP](https://techluck.co.jp/?utm_source=qiita&utm_medium=article&utm_campaign=myarticle)からご連絡いただけますと幸いです。

# 前提
`f.data_select`や`f.datetime_select`などは毎回オプションが多くよく調べていたので、一度まとめてみました。
また、paramsの受け渡しなども参考になるかと思います。

開発環境
- Rails v7.2.1
- TailwindCss
- Ruby v3.3.0

# 年月日の場合
以下のようなデザインで年月日を入力したい場合に使います。

![年月日.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92443/c9e59c3a-7a01-a5cb-ef0b-0a5c5f90fbe9.png)


```erb:app/views/posts/new.html.erb
<%== sprintf(f.date_select(:end_date, { use_month_numbers: true, start_year: 2023, end_year: 2030, date_separator: '%s', selected: Date.today }, { required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" }), '年', '月') + '日' %>
```

このフォームで送られるparameterは以下のようになります。

```terminal
 #<ActionController::Parameters {"authenticity_token"=>"15AnO3gqF6YkX8WHoiRHiTujrYsLaVRT0soirRYScN_UQpOrbTLcWTbf4kFCn4n4gyb2QtFYicPKVaZkWxSnMA", "post"=>{"content"=>"ga", "end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"14"}, "commit"=>"送信する", "controller"=>"posts", "action"=>"create"} permitted: false>
```

`"end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"14"` のようなパラメーターで送られてきますが、ストロングパラメーターで取得すると指定したdatetime型のカラムだと自動的に日時に変換して保存してくれます。

```ruby:app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to new_post_path
    else
      render :new, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:content, :end_date)
  end
end
```

# 年月の場合

以下のようなデザインで年月を入力したい場合に使います。

![年月.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92443/108e8bb3-7fd4-939c-10b7-178afd0cdef3.png)


```erb:app/views/posts/new.html.erb
<%== sprintf(f.date_select(:end_date, { use_month_numbers: true, start_year: 2023, end_year: 2030, discard_day: true, date_separator:'%s', selected: Date.today }, { required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" } ), '年') + '月' %>
```

これで送られてくるパラメーターは以下のようになります。

```terminal
#<ActionController::Parameters {"authenticity_token"=>"aoeh_yuC3RiZjQ6eb2LBqTR7bMHpbpx4xEqqDr_hDSdpVRVvPpoW54sNKViP2Q_YjP43CDNfQejc1S7H8ufayA", "post"=>{"content"=>"nono", "end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"1"}, "commit"=>"送信する", "controller"=>"posts", "action"=>"create"} permitted: false>
```

`"end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"14"` のようなパラメーターで送られてきますが、ストロングパラメーターで取得すると指定したdatetime型のカラムだと自動的に日時に変換して保存してくれます。

```ruby:app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to new_post_path
    else
      render :new, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:content, :end_date)
  end
end
```


# 年月日時分の場合

以下のようなデザインで年月日時分を入力したい場合に使います。

![年月日時分.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/92443/091c10a4-88cf-b88c-0713-e8bcb081639e.png)


```erb:app/views/posts/new.html.erb
<%== sprintf(f.datetime_select(:end_date, { use_month_numbers: true, start_year: 2023, end_year: 2030, date_separator: '%s', datetime_separator: '%s', selected: Date.today }, { required: true, class: "bg-gray-50 border border-gray-300 text-gray-900 text-sm focus:ring-blue-500 focus:border-blue-500 p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" } ), '年', '月', '日') %>
```



これで送られてくるパラメーターは以下のようになります。

```terminal
#<ActionController::Parameters {"authenticity_token"=>"kT5OLrqkwxWKQJ35GcmaSdWs1NlvZ-VuZeFrHbTZo2qS7Pq-r7wI6pjAuj_5clQ4bSmPELVWOP59fu_U-d90hQ", "post"=>{"content"=>"test", "end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"14", "end_date(4i)"=>"03", "end_date(5i)"=>"02"}, "commit"=>"送信する", "controller"=>"posts", "action"=>"create"} permitted: false>
```

`"end_date(1i)"=>"2024", "end_date(2i)"=>"11", "end_date(3i)"=>"14", "end_date(4i)"=>"03", "end_date(5i)"=>"02"` のようなパラメーターで送られてきますが、ストロングパラメーターで取得すると指定したdatetime型のカラムだと自動的に年月日日時に変換して保存してくれます。


```ruby:app/controllers/posts_controller.rb
class PostsController < ApplicationController
  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      redirect_to new_post_path
    else
      render :new, status: :unprocessable_entity
    end
  end

  private

  def post_params
    params.require(:post).permit(:content, :end_date)
  end
end
```

# 参考記事

https://qiita.com/ozackiee/items/3c027d07cdeb61df6029