一般社団法人 全国個人事業主支援協会

COLUMN コラム

こんにちは。
田中です。

今回はKintoneを使用していて、ちょっと詰まったのでその解決方法をメモって以降と思います。

 

問題

Kintoneにて、ノーコードで作成したフォームで登録した日時の項目がある。
その項目を更新するための画面をJavaScriptで作成し、REST APIを使用して更新すると、入力した日時ではなく、+9時間が加算された状態で一覧画面に表示されてしまう。

例:

内容 設定値
一覧画面(更新前) 2023/11/20 10:00
更新画面での入力値 2023/11/25 12:00 REST APIでレコード更新
一覧画面(更新後) 2023/11/25 19:00 入力値から9時間進んでしまっている

これをこうするようにしたい。

内容 設定値
一覧画面(更新前) 2023/11/20 10:00
更新画面での入力値 2023/11/25 12:00 REST APIでレコード更新
一覧画面(更新後) 2023/11/25 12:00 こうしたい。

 

原因

更新画面をJavaScriptで直接記載して構築してしまっているために、タイムゾーンが変わってしまったために日時の表示にズレが表示されてしまったっぽい。

 

改修

更新画面をJavaScriptで構築しているために、「<input type=”data-local”>」でフォームを作成している。
結論からいうと下記のようにソースを書くと入力値と同値の値で一覧に反映される。

function timeSample(formVal) { …①
 …
const timeVal = new Date(formVal); …②
updateTmp["フィールドコード"] = { "value": timeVal.toISOString() }; …③

①のときでは、例の日時に当てはめると取得する値は「2023-11-25T12:00」となる。
KintoneのREST APIで日時を更新するためにはフォーマットを「YYYY-MM-DDThh:mm:ssZ」にする必要がある。
このフォーマットは「簡潔な拡張表記の ISO 形式 (ISO 8601) の文字列」という文字列。
ただ、Functionの引数で取得した値の時点では、文字列として扱うことができる。
なので、変数formValに「:00Z」を追加することができるが、形式が異なるために、更新後一覧画面にはズレた時間で表示されてしまった。

そこで、②のようにデータ型へ変換する。
これで、JavaScriptのData型の関数が使うことができるようになるので、Data型のプロパティであるISO形式に変換が可能な「toISOString()」を使用する(③)

あとは、APIのプロパティ通りに入力すると「2023-11-25T03:00:00Z」となり、形式と時間が変更される。
ここで時間がズレるのはどうなのか?というところだが、ここでは一覧に入力値の値をそのまま反映されることが目的なので、レコードの値までは考慮しないとする。
だが、これで一覧画面には入力した値が表示されるようになります。

 

この記事をシェアする

  • Twitterでシェア
  • Facebookでシェア
  • LINEでシェア