1
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?

More than 1 year has passed since last update.

Rails 日付日時の入力を簡単に実装するヘルパーメソッド

Last updated at Posted at 2022-03-22

Railsにて新規アプリケーションを作成しており、日付と日時を合わせて入力できるヘルパーメソッドを使用しましたのでアウトプットさせて頂きます。

記録機能を実装する上で新規記録時に日時と時間をフォーム形式で入力させたかったので
以下のような記述で入力ページを作成しました。
(完成はしていなく日時と時間の欄をアウトプットする)

app/views/コントローラー名/new.html.erb
<%=form_with model: @record, url:records_path,local: true do |f| %>
  <div class="record-box">
    <h1 class="page-heading">食事を記録する</h1>
      <div class="field">
        <%= f.label :datetime, '日時(必須)', class: 'control-label' %><br>
        <%= f.datetime_field :datetime, class: 'form-control' %>
      </div>

      <div class="field">
         <%= f.label :age_id, '年齢(必須)', class: 'control-label' %>
         <%= f.collection_select(:age_id, Age.all, :id, :name, {}, {class:"select-box"}) %>
      </div>

        <%= f.submit "記録する" ,class:"btn" %>
  </div>
<% end %>

form.labelにはカラム名、表示させたい文字、クラス名を設定しました。
form.datetime_fieldにはカラム名、クラス名を設定しました。

<%= f.label :datetime, '日時(必須)', class: 'control-label' %><br>
<%= f.datetime_field :datetime, class: 'form-control' %>

モデルとコントローラーを作成することが前提ですが、
以下のような見た目になりました。(cssはほぼノータッチ)
スクリーンショット 2022-03-22 15.39.59.png

調べてみると意外に簡単でしたので今後も活用していきたいと思います。

アドバイスやご指摘等ございましたらぜひお願いします!!

以上

1
0
1

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
1
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?