🦁
クライアント側の日時フォーマット指定について
DB上は 2025-04-06 12:14:22.398 というような形で保持しておき、画面上に表示する際に任意の形に加工するのが良さそう。
今回、NEXTJS の環境ではクライアント側で対応しました。参考にさせていただいたのはこの記事です。
現状とやりたいこと
- 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