# 日付フィールドの書式設定について

**URL:** <https://community.cybozu.dev/t/topic/5821>\
**Category:** kintone 開発相談\
**Created:** [2022 年 3 月 21 日午後 12:58 UTC](https://community.cybozu.dev/t/topic/5821 "2022-03-21T12:58:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Legacy\_Account411](https://avatars.discourse-cdn.com/v4/letter/l/34f0e0/32.png) [@Legacy\_Account411](https://community.cybozu.dev/u/Legacy_Account411)\
**Post date:** [2022 年 3 月 21 日午後 12:58 UTC](https://community.cybozu.dev/t/topic/5821/1 "2022-03-21T12:58:14Z")

</div>

日付フィールドの書式設定を

2022/03/21

というフォーマットで統一したくjavascriptカスタマイズを行っているのですが、

詳細表示時イベントにて日付フィールドの書式を変更することはできています。

しかしながら、詳細編集画面および日付フィールドの値が変更された後において、日付フィールドのElementがnullになってしまい、フォーマットを設定できないという症状がでております。

&nbsp;

詳細編集画面が表示された時にElementがnullなのでそもそも取得できていないことになると考えております。この場合、Element要素を取得するにはGETを使うのか、他に方法があるのか知恵をお借りできたら幸いでございます。  
（そもそも詳細編集時に日付フィールドの書式を変更できるのか…という感じなのですが）

また、レコードの一覧表示においても日付フィールドを変更することが可能なのか、もし方法があれば合わせてご教授いただけると幸いでございます。

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

```
(function() {
  'use strict';
  
  ////////////////////////////////////////////////////////
  //日付書式変更関数
  function dateformatchange(date,FieldCode){
    
      let IOSDate = luxon.DateTime.fromISO(date);
      let Element = kintone.app.record.getFieldElement(FieldCode);
      
      debugger;
      if(Element.innerText !== null){
          debugger;
          Element.innerText = IOSDate.toFormat('yyyy/MM/dd');
      }
    
      return Element.innerText;
    
  }
  

  ////////////////////////////////////////////////////////
  //レコード追加・編集時・一覧表示における編集不可設定処理
  function FormEdit(event){
    
      let record = event.record;
      
      //レコード編集不可設定
      record.employee_age.disabled = true; //年齢
      record.employee_history.disabled = true; //入社歴
      record.employee_history_m.disabled = true; //入社歴（月数）
      record.employee_phone_number.disabled = true; //電話番号
      
      //kintone.app.record.setFieldShown('position_number',false); //非表示にする
      
      //スペース要素を格納する変数
      let space01,space02,space03,space04;

      //PCブラウザ表示－詳細表示、レコード追加、レコード編集時
      if(event.type == 'app.record.create.show' ||
         event.type == 'app.record.detail.show' ||
         event.type == 'app.record.edit.show'){
           
          space01 = kintone.app.record.getSpaceElement('space01');
          space02 = kintone.app.record.getSpaceElement('space02');
          space03 = kintone.app.record.getSpaceElement('space03');
          space04 = kintone.app.record.getSpaceElement('space04');
         
         
      //スマホ表示－詳細表示、レコード追加、レコード編集時
      }else if(event.type == 'mobile.app.record.create.show' ||
               event.type == 'mobile.app.record.detail.show' ||
               event.type == 'mboile.app.record.edit.show'){
               
          space01 = kintone.mobile.app.record.getSpaceElement('space01');
          space02 = kintone.mobile.app.record.getSpaceElement('space02');
          space03 = kintone.mobile.app.record.getSpaceElement('space03');
          space04 = kintone.mobile.app.record.getSpaceElement('space04');
                 
      }
      
      space01.innerText = ' 社員個人情報'; //テキストの内容
      space01.style.fontSize = "18px"; //テキストの大きさ
      space01.style.backgroundColor = '#2B4399'; //背景色
      space01.style.color = '#FFFFFF'; //文字の色
      space01.style.fontWeight = 'bold'; //文字の太さ
      space01.style.textAlign = 'left'; //文字の水平方向位置 
      space01.style.verticalAlign = 'top';//文字の垂直方向 top,middle,bottom

      space02.innerText = ' 学校履歴'; //テキストの内容
      space02.style.fontSize = "18px"; //テキストの大きさ
      space02.style.backgroundColor = '#2B4399'; //背景色
      space02.style.color = '#FFFFFF'; //文字の色
      space02.style.fontWeight = 'bold'; //文字の太さ
      space02.style.textAlign = 'left'; //文字の水平方向位置 
      space02.style.verticalAlign = 'top';//文字の垂直方向 top,middle,bottom
      
      space03.innerText = ' ITツール情報'; //テキストの内容
      space03.style.fontSize = "18px"; //テキストの大きさ
      space03.style.backgroundColor = '#2B4399'; //背景色
      space03.style.color = '#FFFFFF'; //文字の色
      space03.style.fontWeight = 'bold'; //文字の太さ
      space03.style.textAlign = 'left'; //文字の水平方向位置 
      space03.style.verticalAlign = 'top';//文字の垂直方向 top,middle,bottom
      
      space04.innerText = ' 取得資格情報'; //テキストの内容
      space04.style.fontSize = "18px"; //テキストの大きさ
      space04.style.backgroundColor = '#2B4399'; //背景色
      space04.style.color = '#FFFFFF'; //文字の色
      space04.style.fontWeight = 'bold'; //文字の太さ
      space04.style.textAlign = 'left'; //文字の水平方向位置 
      space04.style.verticalAlign = 'top';//文字の垂直方向 top,middle,bottom
      
      //日付フィールドの書式設定
      //誕生日フィールド
      let DataFieldCode = ['employee_birthday', //誕生日フィールド
                           'employee_joined', //入社日フィールド
                           'employee_6thgrade']; //6等級合格日フィールド
                           
      for(let i = 0; i < DataFieldCode.length; i++){
        
          if(record[DataFieldCode[i]].value){
            
              dateformatchange(record[DataFieldCode[i]].value,DataFieldCode[i]);
          }
        
      }
      
      return event;
    
  }
  
  ////////////////////////////////////////////////////////
  //レコード追加・編集時において日付フィールドの値が変更された時の処理
  function DaysFieldFormatChange(event){
    
     let record = event.record;
     //日付フィールドの書式設定
     //誕生日フィールド
     let DataFieldCode = ['employee_birthday', //誕生日フィールド
                          'employee_joined', //入社日フィールド
                          'employee_6thgrade']; //6等級合格日フィールド
                           
     for(let i = 0; i < DataFieldCode.length; i++){
        
         if(record[DataFieldCode[i]].value){
            
             dateformatchange(record[DataFieldCode[i]].value,DataFieldCode[i]);
         }
        
     }
      
     return event;
    
  }
  
  kintone.events.on(['app.record.create.show', //PCブラウザにてレコート追加画面が表示されたとき
                    'app.record.edit.show', //PCブラウザにて詳細画面でレコード編集画面が表示されたとき
                    'app.record.detail.show', //PCブラウザにて詳細画面が表示されたとき
                    'mobile.app.record.create.show', //スマホ表示にてレコード追加画面が表示されたとき
                    'mobile.app.record.edit.show', //スマホ表示にてレコード編集画面が表示されたとき
                    'mobile.app.record.detail.show'], //スマホ表示にてレコード詳細画面が表示されたとき
                    FormEdit
                    );
                    
  kintone.events.on(['app.record.edit.change.employee_birthday', //PCブラウザ表示で編集画面にて生年月日レコードが変更された時
                     'app.record.edit.change.employee_joined', //PCブラウザ表示で編集画面にて入社日レコードが変更された時
                     'app.record.edit.change.employee_6thgrade', //PCブラウザ表示で編集画面にて6等級合格日レコードが変更された時
                     'app.record.create.change.employee_birthday', //PCブラウザ表示で追加画面にて生年月日レコードが変更された時
                     'app.record.create.change.employee_joined', //PCブラウザ表示で追加画面にて入社日レコードが変更された時
                     'app.record.create.change.employee_6thgrade'], //PCブラウザ表示で追加画面にて6等級合格日レコードが変更された時
                     DaysFieldFormatChange
                     );
  
  
  
})();

```

---

<div class="post-metadata">

**Author:** ![Legacy\_Account1517](https://avatars.discourse-cdn.com/v4/letter/l/4bbf92/32.png) [@Legacy\_Account1517](https://community.cybozu.dev/u/Legacy_Account1517)\
**Post date:** [2022 年 3 月 22 日午前 2:28 UTC](https://community.cybozu.dev/t/topic/5821/2 "2022-03-22T02:28:36Z")

</div>

kintone の日付形式については、YYYY/MM/DD 形式で表示の要望がよくあると思います。

ただ無理やりYYYY/MM/DD 形式にしても、苦労の割にはメリットが少なくデメリットばかりになります。

郷に入っては郷に従えというように、kintone は YYYY-MM-DD しかできませんと押し通しましょう。

デメリット

・全アプリをカスタマイズするのか？一部アプリだけだとかえって混乱する。

・日付項目追加のたびにカスタマイズ変更が必要。簡単に項目追加できなくなる。

&nbsp;

\>詳細編集画面および日付フィールドの値が変更された後において、日付フィールドのElementがnullになってしまい、フォーマットを設定できない

kintone.app.record.getFieldElement 関数は、詳細画面でしか使用できません。  
編集画面で、日付フィールドを取得するには通常の DOM操作しかありませんが、kintone では推奨されていませんので、kintone の仕様変更に対応できないというリスクが生じます。

また、編集画面で日付項目にYYYY/MM/DD 形式で設定すると「日付の形式が不正です。」のエラーになります。  
試しにマニュアル入力でYYYY/MM/DD 形式の値を入力してみてください。

わざわざYYYY/MM/DD 形式の入力エリアをスペース項目に作って、レコード保存時に日付項目に値を設定するなどのカスタマイズを行えば対応できると思いますが、かなり面倒です。

&nbsp;

あとコードでスペース項目に「社員個人情報」などの固定文字を表示させている箇所がありますが、これもラベルで表示すれば目的は達成できると思います。

多少デザインが気になっても kintone の標準機能で出来ることは、そのまま使われたほうが、あとあと苦労せずに済むと思います。

&nbsp;

---

<div class="post-metadata">

**Author:** ![Legacy\_Account411](https://avatars.discourse-cdn.com/v4/letter/l/34f0e0/32.png) [@Legacy\_Account411](https://community.cybozu.dev/u/Legacy_Account411)\
**Post date:** [2022 年 3 月 22 日午前 9:01 UTC](https://community.cybozu.dev/t/topic/5821/3 "2022-03-22T09:01:50Z")

</div>

rex0220様ありがとうございます。

日付フィールドの書式を変更するのは手間でありリスキーであることが分かりました。

アプリを作るたびに日付フォーマットをjavascriptで変更する…これは大変な労力になるなら、避けるべきですよね。

当方サイボウズOfficeからkintoneに移行するにあたって、極力サイボウズOfficeに近づけられるか…を検証していたのですが、日付書式はkintoneの仕様ということで伝えていった方がよさそうですね。

またラベルの件もご教授いただきありがとうございます！

スペース項目の表示させる文字を状況によって変える場合にはいいのかなと思って試していました。特に今回のアプリでは変える予定はないので、ラベルだよね！という思考を持つべきだと思いました。

なんでもjavascriptではなくて、できるだけ標準機能で！という思考で行ければと感じました。

親切にご教授いただきrex0220様ありがとうございました！