상세 화면을 열 때마다 어느 날짜 필드에서 현재까지 얼마나 시간이 경과했는지 알 수 있는 앱을 만들어 보고 싶습니다.
레코드에 저장하는 것이 아니라 외형만 변경합니다.

앱 준비

외형은 이미지와 같은 느낌이고 적자는 필드 코드입니다.

그날 : 날짜
경과일수:문자열(1행)
이벤트:문자열(1행)
입니다.

자바스크립트

설명은 나중에 설명합니다.

kintone.events.on("app.record.detail.show", (event) => {
  const record = event.record;
  //サンプルコード流用↓
  const calculateDuration = (dateStr) => {
    const currentDate = luxon.DateTime.local().startOf("day");
    const date = luxon.DateTime.fromISO(dateStr).startOf("day");
    // 経過期間を計算する
    const duration = currentDate.diff(date, ["years", "months", "days"]);
    return duration.toObject();
  };
  // あの日からの経過日数を計算する
  if (record["テーブル"].value.length === 0) {
    return event;
  }
  //テーブルの要素を取得
  const tableData = kintone.app.record.getFieldElement("テーブル");
  //テーブルのtbody要素を取得
  const tableBody = tableData.tBodies[0];
  //テーブルのrows（行、tr）の要素を取得
  const tableRows = tableBody.rows;
  //テーブルの最後の行まで全部画面表示されるまで待つ（要素が見つかるまで0.1秒ごとに実行する）
  const set_interval_id = setInterval(() => {
    // 要素を見つける処理
    if (!!tableRows[record["テーブル"].value.length - 1]) {
      Array.prototype.slice.call(tableRows).forEach((tr, idx) => {
        const keika = calculateDuration(record.テーブル.value[idx].value.あの日.value);
        tr.cells[1].firstChild.firstChild.firstChild.textContent = keika.years + "年" + keika.months + "ヶ月";
      });
      clearInterval(set_interval_id);
    }
  }, 100);
  return event;
});

Luxon

날짜를 다루는 라이브러리로 Luxon을 사용했습니다.
Cybozu CDN은 여기를 확인하십시오.
htps : //에서 ゔぇぺぺr. cy 흐림. 이오 / hc / 그럼 / 아 rc c s / 202960194 # ぉ

경과 연월을 취득하는 함수에 대해서는 이쪽의 샘플 코드를 (var를 const로 바꾸어) 사용했습니다.
htps : //로 ゔぇぺぺr. cy 흐림. 이오 / hc / 자 / 아 rc c s / 900000985463 # 우사게 킨토네

//サンプルコード流用↓
const calculateDuration = (dateStr) => {
  const currentDate = luxon.DateTime.local().startOf("day");
  const date = luxon.DateTime.fromISO(dateStr).startOf("day");
  // 経過期間を計算する
  const duration = currentDate.diff(date, ["years", "months", "days"]);
  return duration.toObject();
};

필드 요소 얻기

테이블의 필드는 직접 취해 이것이 없기 때문에, 일단 테이블의 요소를 취득해, 그 요소의 children 를 따라 가서··· tbody 를 취득 후, rows (tr) 조작입니다. 그대로 DOM 조작하려고 해도 표시가 끝나지 않아 행의 요소를 취할 수 없기 때문에, setInterval 로 테이블의 마지막 행이 표시될 때까지 기다리고 나서 실시합니다.
htps : //로 ゔぇぺぺr. cy 흐림. 이오/hc/쟈/아르치 cぇs/201942014#s해서 p3

//テーブルの最後の行まで全部画面表示されるまで待つ（要素が見つかるまで0.1秒ごとに実行する）
const setIntervalId = setInterval(() => {

.children 로 취득한 요소의 정보(tableRows) tableBody.rows 로 취득한 행의 요소는, 배열 객체가 아니고 HTMLCollection 라고 하는 객체입니다. 배열이 아니기 때문에 forEach 등의 배열의 메소드를 사용할 수 없습니다. ↓과 같이 Array.prototype.slice.call(tableRows) 그리고 배열 객체로 바꾼 다음 forEach를 사용합니다.
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 쟈 / ㅇ cs / ぇ b / 쟈 ゔ Sc 리 pt / 레후 렌세 / G ぉ 바 l_ 오 b ぇ cts / 아라 y / s ぃ 세 # 아라 y ぃ 케 _ 오 bjicts

const tableRows = tableBody.rows;
～略～
//HTMLCollectionであるtableRowsを配列に変形しつつ、forEach回す
Array.prototype.slice.call(tableRows).forEach((tr, idx) => {
  const keika = calculateDuration(record.テーブル.value[idx].value.あの日.value);
  tr.cells[1].firstChild.firstChild.firstChild.textContent = keika.years + "年" + keika.months + "ヶ月";
});

완성

외형이지만, 오늘까지의 경과 연월을 표시할 수 있었습니다.
미래의 날짜로 하고 있으면 경과 연월이 마이너스가 되어 버립니다만, 이번은 그것으로 요시로 합시다!

DOM을 괴롭히는 커스터마이즈였습니다만, kintone측의 업데이트등에 의해, html의 구성이 바뀌어 버리면 사용할 수 없게 될 가능성도 있으므로, 요주의입니다👀

그렇기 때문에 이번에는 이걸로 ~ 노시 노시