日時フィールドの「日付」部のみデータ更新したい

お世話になっております。

開発は経験がなく、JavaScriptも素人のためどうしても自分だけでは解決できず質問させて頂きます。
長くなりますが、ご教授頂けましたら幸いです。

【現状のご説明】

工数を管理するに当たり、「作業開始」「作業終了」時間の入力フォームを設けています。
作業開始~作業終了は日付をまたぐこともあり、「日時」フィールドで作成しています。
また、別途一覧画面でのソートのため「作業日」フォーム(「日付」フィールド)を設けています。
レコード登録の際には「作業日」「作業開始日(時)」「作業終了日(時)」の3つの日付を入力する必要があります。

1日の内に複数の作業を行うため、1日の工数は時間単位でサブテーブル「工数管理」で作業毎に行追加しデータ入力してもらっています。
各フォームではレコード登録時の日付を初期値にするよう設定をしておりますが、翌日などに日付を遡りデータ入力を行う場合、
毎回各フォーム単位での日付修正を行わなければならない状態です。

現状、日付の修正忘れが多発し、データの信憑性が下がる、修正の手間が発生するなどの不都合が出ています。
修正忘れを回避するため、「作業日」を変更すると同時に「作業開始日(時)」「作業終了日(時)」に作業日をコピーするコードを作成しました。

 

(function() {
  'use strict';
  kintone.events.on([
     "app.record.create.change.工数管理.row",
     "app.record.edit.change.工数管理.row",
     "app.record.create.change.作業日",
    "app.record.edit.change.作業日"
    ], function(event) {
      var record = event.record;
      
      //「作業日」をwork_dayに代入
      var work_day = record.作業日.value;
      record.工数管理.value.forEach(function(row) {
    
        //「作業開始」「作業終了」の10文字目~末尾までを
        //抜き取りwork_start・work_endへ代入
        var work_start = row.value.作業開始.value.slice(10,16) + "+00:00";
        var work_end = row.value.作業終了.value.slice(10,16) + "+00:00";
        
        //「作業開始」「作業終了」へデータセット
        row.value.作業開始.value = work_day + work_start;
        row.value.作業終了.value = work_day + work_end;
      });
    return event;
  });
})();

 

【上記を踏まえた問題点】

「作業日」のみ「作業開始日時」「作業終了日時」の「日付」部にコピーし、「時刻」部分のみはそのままデータを保持する。
といった形にしようと考えておりましたが、

  1. var work_start = row.value.作業開始.value.slice(10,16) + “+00:00”;
  2. var work_end = row.value.作業終了.value.slice(10,16) + “+00:00”;

の時差修正にあたる”+00:00”部が問題で、本来は”+09:00”とするのが正解ですが、”+09:00”とすると作業日を更新する度に、
「作業開始日時」「作業終了日時」の「時刻」において時差分が毎回マイナスされてしまいます。

”+00:00”とすることで、時刻データを更新させないようにできることは発見しましたが、続いての問題が発覚しました。

『時刻が「00:00~08:59」であった場合、その日時フィールドの日付が1日加算される』という問題です。
時差となる「9時間」が悪さをしているとは思うのですが、この現象を回避するためには
『if文で時刻が「00:00~08:59」であった場合、日付を-1する』といったコードを追加するしかないのでしょうか…。

過去の記事などを参照してここまで頑張りましたが、JavaScript自体勉強中でなかなか自分ではそこまでの対応ができなかったため、
お知恵をお貸し頂けましたらと質問させて頂きました。

どうぞよろしくお願いいたします。

こんにちわ!

Moment.jsを使うと上手くいくと思います。

https://developer.cybozu.io/hc/ja/articles/204982474

上のページを参考に以下の2つを追加します。

https://js.cybozu.com/momentjs/2.24.0/moment.min.js

https://js.cybozu.com/momentjs/2.24.0/moment-with-locales.min.js

 

そして、以下のように少しイジれば、いけると思います。

      var record = event.record;
      moment.locale('ja');     //この辺りに追加
      
      varwork_day = record.作業日.value;
      record.工数管理.value.forEach(function(row) {
        
        var start_date = moment(row.value.作業開始.value).format(''); //←取得した日時をフォーマット
        var end_date = moment(row.value.作業終了.value).format('');
        var work_start = start_date.slice(10,16) + ":00+09:00";
        var work_end = end_date.slice(10,16) + ":00+09:00";
        
        row.value.作業開始.value = work_day + work_start;
        row.value.作業終了.value = work_day + work_end;
      });
    return event;
  });
})();

 

 

Ryokke 様

 

ありがとうございます!

今、Ryokke様にご教授頂きました方法で希望通り「作業開始日」「作業終了日」部のみ
綺麗に日付の上書ができるようになりました。
ここしばらく一人で行き詰まっていたのですが、感動です。

また、ご丁寧にMoment.jsのURLや修正コードまでわかりやすく記載していただいたことで
知識のない自分でも素早く対応することができました。

本当に本当にありがとうございました。