0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Railsのdate_fieldに関するオプション(stepとtype)

Last updated at Posted at 2024-12-27

検証条件

  • Rails 7.1.3
  • Ruby 3.3.3
  • HTML5
  • ブラウザ Google Chrome バージョン: 129.0.6668.70(Official Build) (arm64)

stepオプション

stepオプションは、date_field の入力値の増減ステップを指定するために使用されます。

具体的には、step オプションを使うことで、ユーザーが日付を選択する際に、増減する単位(日数)を設定できます。

*注意
<input type="date">をサポートするブラウザでのみ有効です。
サポートされていないブラウザでは、このオプションは無視されます。
無効な値を指定すると、ブラウザはデフォルト値の 1 を使用します。

設定値

・1日単位(デフォルト)

ユーザーはカレンダーや日付ピッカーで、1日単位で日付を選択できます。

<%= form.date_field :birthday, step: '1' %>

スクリーンショット 2024-12-27 21.07.59.png

・7日単位(1週間ごと)の場合

日付ピッカーで日付を1週間ごとに選択できます。

<%= form.date_field :birthday, step: '7' %>

スクリーンショット 2024-12-27 21.09.12.png

任意の値を許可

JavaScriptと組み合わせて土日だけ選択させるケースなどに使用します。

<%= form.date_field :birthday, step: 'any' %>

typeオプション

date_field の type オプションは、HTML5 の 要素における type 属性を指定するためのオプションです。
date_field に関しては、type="date" がデフォルトの値です。

設定値

date

・デフォルトの設定です。
・日付を選択できます。
・入力形式は YYYY-MM-DD(例: 2024-12-27)となります。

<%= form.date_field :birthday, type: 'date' %>

スクリーンショット 2024-12-27 21.26.41.png

datetime-local

・日付と時間を選択、入力できます。
・入力形式は YYYY-MM-DDTHH:MM(例: 2024-12-25T15:30)となります。
date_time_local_fieldでも可
https://railsdoc.com/page/datetime_local_field

<%= form.date_field :birthday, type: 'datetime-local' %>

スクリーンショット 2024-12-27 21.28.52.png

time

・時間(時間と分のみ)を選択、入力できます。
・入力形式は HH:MM(例: 15:30)となります。
time_fieldでも可
https://railsdoc.com/page/time_field

<%= form.date_field :birthday, type: 'time' %>

スクリーンショット 2024-12-27 21.29.56.png

month

・年と月を選択、入力できます。
・入力形式は YYYY-MM(例: 2024-12)となります。
month_fieldでも可
https://railsdoc.com/page/month_field

<%= form.date_field :birthday, type: 'month' %>

スクリーンショット 2024-12-27 21.30.50.png

week

・年と週番号を選択、入力できます。
・入力形式は YYYY-Www(例: 2024-W52)となります。
week_fieldでも可
https://railsdoc.com/page/week_field

<%= form.date_field :birthday, type: 'week' %>

スクリーンショット 2024-12-27 21.31.45.png

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?