新規投稿
フォローする

Luxon での日付フィールドの表示形式を変えたい

初心者ですので全くの検討違いなことを言っていたら申し訳ございません。どうかよろしくお願いします。

luxonを使用して日付フィールドで日付を選択するとyyyy年m月に表示形式を変えたく下記のコードをさがしてきましたが、まったく反映されません。

 

ちなみに

for (vari = 0; i < e.records.length; i++) {
      var date = e.records[i]['売上月'].value;

ここの部分は何故for文なのか教えていただけると幸いです。

 

(function() {
"use strict";

  // レコード詳細画面表示イベント
  kintone.events.on('app.record.detail.show', function(e) {
    var elements = kintone.app.getFieldElements('売上月');

    for (vari = 0; i < e.records.length; i++) {
      var date = e.records[i]['売上月'].value;
     
      //日付フィールドの値からLuxon オブジェクトを生成
      var dateFieldDate= luxon.DateTime.fromISO(date);

      // 日付のフォーマットを'yyyy年M月'に変更
      elements[i].innerText =dateFieldDate.toFormat('yyyy年M月') ;
      elements[i].style.verticalAlign = 'middle';
      elements[i].style.textAlign = 'center';
    }
  });
})();
0

4件のコメント

Avatar
koichi

aoanさん

こんにちは。

 

先に前提条件の確認になりますが、この処理を行うのはレコード一覧画面でしょうか、レコード詳細画面でしょうか。

というのも、app.record.detail.showイベントは詳細画面表示時のイベントです。

しかし、kintone.app.getFieldElements()は一覧画面でしか使えません。

また、for文も一覧画面であれば、表示しているレコードを順に処理するために使えますが

詳細画面であればforにする必要はありません(むしろエラーになります)。

0
Avatar
aoan

koichi様

コメントありがとうございます。

処理が行いたいのは新規登録、編集、詳細画面表示の時点です。

for文の件もありがとうございます。一覧の時に使用するものだったんですね。

具体的にどの箇所を直せばいいのでしょうか?お手数ですがご教授お願い致します。

0
Avatar
koichi

2つ方法をお伝えします。

①標準機能でフォーマットする(文字列1行の自動計算)

②JSで見た目を変える

 

①文字列1行の自動計算を有効にすれば日付フォーマットができます。

DATE_FORMAT(日付フィールド, "YYYY年M月", "Asia/Tokyo")

 

②JSであれば内部の値を書き換えることはできませんが、見た目だけ変えることが可能です。

 但し、詳細画面に限った話です。

(function() {

  'use strict';

    kintone.events.on('app.record.detail.show', function(event) {

        const element = kintone.app.record.getFieldElement('日付');

        // 日付フィールドの値からLuxon オブジェクトを生成
        const dateFieldDate = luxon.DateTime.fromISO(event.record.日付.value);

        // 日付のフォーマットを'yyyy年M月'に変更
        element.innerText = dateFieldDate.toFormat('yyyy年M月');
        element.style.verticalAlign = 'middle';
        element.style.textAlign = 'center';

        return event;

    });

})();

 

kintoneの仕様として、日付フィールドは日付形式(YYYY-MM-DD)でしか登録を受け付けません。

そのため、新規登録画面や編集画面では、この形式で入れるしかありません。

 

 

0
Avatar
aoan

koihi様

ありがとうございます!

文字列1行の自動計算にすると日付のカレンダーで選択させたいので二つフィールドを表示しなければならずあまりスマートではないなと思い今回JSにチャレンジしてみることにしました。

詳細画面以外では無理なんですね・・・でもとりあえずの形はできました。

丁寧に教えていただきありがとうございました^^

1
サインインしてコメントを残してください。