前提・実現したいこと

フォームに入力しようとするとカレンダーが表示され、年月日を指定。
指定した年月日と今日とを減算し、フォームに表示させ、目標期日としてDBに保存したい。

例：
カレンダーで2022年3月31日を選択
今日が2022年3月16日である場合
{target_date: 15}としてDBに保存

html.erb
1<div class="wrapper">
2  <div class="side-bar">
3    <h2>初期設定</h2>
4    <%= form_with model: @target_budget, url:targets_path, local: true do |f| %>
5      <%= render 'shared/error_messages', model: @target_budget %>
6      <div class="field">
7        <div class="message">
8          いくら貯めますか?
9        </div>
10        <div class="form">
11          <%= f.number_field :target_amount, placeholder: "1000000", min: 1 %><span>円</span>
12        </div>
13      </div>
14      <div class="field">
15        <div class="message">
16          いつまでに貯めますか?
17        </div>
18        <div class="form">
19          <%= f.number_field :target_date, id: "calendar" %><span>日</span>
20          <% # ↑このフォームに選択した日付と今日までの差を自動入力させたい %>
21        </div>
22      </div>
23      <div class="field">
24        <div class="message">
25          先月の収入を入力してください
26        </div>
27        <div class="form">
28          <%= f.number_field :income, placeholder: "250000" %><span>円</span>
29        </div>
30      </div>
31      <div class="field">
32        <div class="message">
33          先月の固定費を入力してください
34        </div>
35        <div class="form-bottom">
36          <%= f.number_field :fixed_cost, placeholder: "120000" %><span>円</span>
37        </div>
38      </div>
39      <div class="form-submit">
40        <%= f.submit "確認画面へ" %>
41      </div>
42    <% end %>
43    <%= link_to 'ログアウトする', destroy_user_session_path, method: :delete, class: "logout" %>
44  </div>
45</div>

試したこと

form_withに元々付いているdate_fieldを活用して日付の値を取り出し、
javascriptで今日の日付を取り出しましたが、

html.erb
1      <div class="field">
2        <div class="message">
3          いつまでに貯めますか?
4        </div>
5        <div class="form">
6          <%= f.date_field :target_date, id: "calendar" %><span>日</span>
7          <% # ↑このフォームに選択した日付と今日までの差を自動入力させたい %>
8        </div>

js
1function get (){
2  const calendar = document.getElementById("calendar");
3  calendar.addEventListener("change", () => {
4    const today = new Date();
5    const targetDay = calendar.value;
6    console.log(today);
7    console.log(targetDay);
8  });
9};
10
11window.addEventListener('load', get);

出力結果

today　　= Wed Mar 16 2022 09:29:58 GMT+0900 (日本標準時)
targetDay=　2022-03-30

date_fileldはただ単に選択した日付の文字列を取得するだけで、
日付そのものを取得するわけではないという理解に至りました。
target_dateを日付のまま保存して、
後にDate.todayからの減算を試みましたが、
やはりtarget_dateが文字列である以上、
計算できないと怒られてしまいました。

何か妙案はないものでしょうか。
皆様のお知恵を拝借したいです。

よろしくお願いいたします。

行動規範の内容に同意します

回答1件

ベストアンサー

文字列からDateを作ればよいです。

js
1const [year, month1, day] = calendar.value.split('-');
2const targetDay = new Date(year, month1 - 1, day);

HTMLInputElement 型に valueAsDate というプロパティがありますが、これは UTC 表記としてDateオブジェクトを作るので、「ユーザにとっての今日の日付」との比較には不適当です。

投稿2022/03/16 02:35

編集2022/03/16 03:25

int32_t

総合スコア20880

kanieksuke

2022/03/16 04:04

解説ありがとうございます！と言っても、まだ噛み砕いている最中っす;; Dateオブジェクトを用いて今日と目標期日を比較すると、9時間分誤差が出てしまう、という認識でよろしいでしょうか。（トンチンカンなこと言ってたらすいません;;）何はともあれ、頑なに数字とハイフンしか出力してくれなかったtargetDayを日付に進化させることができました! これからこの二つの変数からそれぞれ日にちを抽出して減算、その結果をフォームに反映させる作業に取り掛かります。この過程で詰まったら、厚かましくもまた質問させていただきます。回答いただき、ありがとうございました!