"YYYY/MM"形式のDateTimeを作成するとInvalid dateエラーが発生する【kintone UI Component】

kintone カスタマイズ
1

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

DateTimeでエラーが発生し、解決することができません。

仕様の解釈が間違っているのかもしれませんが、何か解決方法があればご教授頂けると幸いです。

 

【実現したいこと】

”YYYY/MM”形式で表示されている日付入力フォームを一覧画面のヘッダースペースに表示させたいです。

日付選択としては、デフォルトのままで問題ありません。

 

【現在発生している問題】

kintone UI Componentを用いてヘッダースペースに"YYYY/MM"形式のDateTimeを作成すると、Invalid dateが表示されてしまいます。

条件としては、日付指定のポップアップを開いた後、ポップアップ外側をクリックして閉じた場合に発生します。

初期表示やポップアップで日付を選択した場合には、エラーは表示されません。

また、console.log()でDateTime.getValue()を確認すると、正常に値が格納されていることが確認できました。

 

 

【ソースコード】

kintone.events.on(['app.record.index.show'], function (event) {
var targetDay = new Date();
targetDay.setDate(targetDay.getDate() - 1);
var dateTime = new kintoneUIComponent.DateTime({ value: targetDay, type: 'date', locale: 'ja', dateFormat: "YYYY-MM" });
kintone.app.getHeaderSpaceElement().appendChild(dateTime.render());
return event;
});

 

【試したこと】

"YYYY"形式や"MM"形式でも試してみましたが、単一の要素を指定すると表示がされなくなってしまいました。

2

藤田様

お世話になっております。
トヨクモの江田と申します。

Git Hubのソースを見たところ，日付なしの場合にエラーが出るのは仕様のようですね．

「src/react/DateTime/components/utils.ts」を一部書き換え，buildし直せば，日付なしにも対応可能です．

・src/react/DateTime/components/utils.ts

.....
const parseStringToDate = (dateString: string, dateFormat?: string) => {
  const formatLowerCase = dateFormat ? dateFormat.toLowerCase() : 'mm/dd/yyyy';
  const delimiter = getSeperator(formatLowerCase);
  if (dateString.split(delimiter).length !== formatLowerCase.split(delimiter).length) {
    return null;
  }
  const formatItems = formatLowerCase.split(delimiter);
  const dateItems = dateString.split(delimiter);
  const monthIndex = formatItems.indexOf('mm');
  const dayIndex = formatItems.indexOf('dd');
  const yearIndex = formatItems.indexOf('yyyy');
  const day = (dayIndex < 0) ? 1 : parseInt(dateItems[dayIndex], 10);
  let month = parseInt(dateItems[monthIndex], 10);
  month -= 1;
  const year = parseInt(dateItems[yearIndex], 10);
  const formatedDate = new Date(year, month, day);
  return formatedDate;
};
.....
3

トヨクモ 江田篤史様

お世話になっております。
丁寧な回答ありがとうございます。

江田様からご教授頂いた回答を元に修正・ビルドを行ったところ、
無事DataTimeの日付なし形式に対応することができました。

非常に助かりました。
ありがとうございました。

4

このトピックはベストアンサーに選ばれた返信から 3 日が経過したので自動的にクローズされました。新たに返信することはできません。