検証条件
- 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' %>
・7日単位(1週間ごと)の場合
日付ピッカーで日付を1週間ごとに選択できます。
<%= form.date_field :birthday, step: '7' %>
任意の値を許可
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' %>
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' %>
time
・時間(時間と分のみ)を選択、入力できます。
・入力形式は HH:MM(例: 15:30)となります。
time_field
でも可
https://railsdoc.com/page/time_field
<%= form.date_field :birthday, type: 'time' %>
month
・年と月を選択、入力できます。
・入力形式は YYYY-MM(例: 2024-12)となります。
month_field
でも可
https://railsdoc.com/page/month_field
<%= form.date_field :birthday, type: 'month' %>
week
・年と週番号を選択、入力できます。
・入力形式は YYYY-Www(例: 2024-W52)となります。
week_field
でも可
https://railsdoc.com/page/week_field
<%= form.date_field :birthday, type: 'week' %>