microCMSを公式に沿って活用していると、日付の取得が細かすぎることに気づきました。
日付を見ると「2023-02-03T04:41:18.797Z」とあります。
「T04:41:18.797Z」はない方がスッキリするので、フォーマットを整える方法を探しました。
toLocaleDateString関数で省略できる
new Date(publishedAt).toLocaleDateString();でも実装例がなく、少しだけ時間を食いました。
下記に詳細があったので参考にしました。
Date.prototype.toLocaleTimeString() -JavaScript | MDN
//フォーマットを与える前
<main className={`${commonStyles['l-main']} ${styles['p-article']}`}>
<h1 className={styles['c-article__title']}>{blog.title}</h1>
<p className={styles['c-article__time']}>{blog.publishedAt}</p>
<div className={styles['c-article__contents']}
dangerouslySetInnerHTML={{
__html: `${blog.body}`,
}}
/>
</main>//フォーマットを与えて、コンテンツに渡します。
const date = new Date(blog.publishedAt).toLocaleDateString();
return (
<main className={`${commonStyles['l-main']} ${styles['p-article']}`}>
<h1 className={styles['c-article__title']}>{blog.title}</h1>
<p className={styles['c-article__time']}>{date}</p>
<div className={styles['c-article__contents']}
dangerouslySetInnerHTML={{
__html: `${blog.body}`,
}}
/>
</main>
);
}{blog.publishedAt}で取得していたデータを、一旦constで宣言した変数dataへ格納します。
HTMLの中で日付を表示させたい箇所に{data}を置いておくと・・・
toLocaleDateString(オプション)で自由度の高いフォーマットも
例えばアメリカ時間で24時間表記にしたい場合、下記のように書くと
const date = new Date(blog.publishedAt).toLocaleDateString('en-US', { hour12: false });
各国の時間を表せるので、調べてみるのも面白いかもしれません。
個人的な課題
YY/MM/DDの書き方もいいのですが、YY-MM-DDなどの細かいフォーマットも探してみたいですね。
調べたら追記します。
