🦁

クライアント側の日時フォーマット指定について

に公開

DB上は 2025-04-06 12:14:22.398 というような形で保持しておき、画面上に表示する際に任意の形に加工するのが良さそう。

今回、NEXTJS の環境ではクライアント側で対応しました。参考にさせていただいたのはこの記事です。
https://ribbit.konomi.app/blog/javascript-date-format/

現状とやりたいこと

  • DB上はTimeStamp型でデータを保持する
  • APIからデータを受け取る(その時点では加工しない)
  • 画面に表示する際に任意の形に加工する(今回は YYYY/MM/DD にする)

APIのレスポンス

paymentDateの行はDBに保持した形のままAPIではレスポンスを返す

{
"id": "e26f63da-9021-48c7-aaf9-69d5b4b2e1fc",
"amount": 23,
"paymentDate": "2025-04-13T11:02:23.705Z"
}

画面上での加工

APIからレスポンスを受け取り、データが取れた場合は日付項目を加工する。加工に利用したメソッドはリンク先の getFormattedDate を利用させていただきました。

interface Come {
    id: string;
    amount: number;
    paymentDate: string;
}

const response = await fetch(`/api/wallet/`);
const resData = await response.json();
if (response.ok && resData) {
    resData.forEach((item: Come) => {
    item.paymentDate = getFormattedDate(new Date(item.paymentDate), "yyyy/MM/dd");
    })
}
};

想定通り YYYY/MM/DD の形に加工することができました。

Discussion