date-fns は日時を操作するための JavaScript ライブラリの一つです。昨年度、新規機能開発の停止を宣言した Moment.js に代わるライブラリの一つです。
【JavaScript】Moment.js の新規機能開発が停止。新規プロジェクトへの採用は非推奨へ – 株式会社シーポイントラボ ｜ 浜松のシステム・RTK-GNSS開発
この手の日時操作ライブラリを複数に渡って使う際にありがちなのが、文字列フォーマットで使うトークンの意味の取り違えです。date-fns も例によって Moment.js と異なる点があります。例えば Moment.js における dddd は 金曜日 などの曜日の最大長表示でしたが、date-fns の日本語ロケールにおける dddd は 4 桁の日です。
このあたりを使った例が次です。
import "./styles.css";
import format from "date-fns/format";
import ja from "date-fns/locale/ja";
import moment from "moment";
import "moment/locale/ja";
const fns = format(new Date(), "yyyy年M月d日(E)", { locale: ja });
const fnsH = format(new Date(), "yyyy年M月d日(E) HH:mm", { locale: ja });
const fnsdddd = format(new Date(), "dddd", { locale: ja });
document.getElementById("app").innerHTML = `
<div class="grid">
<div class='header'>ライブラリ</div><div class='header'>フォーマット文字列</div><div class='header'>結果</div>
<div>moment</div><div>dddd</div><div>${moment().format("dddd")}</div>
<div>date-fns</div><div>locale:ja の dddd:</div><div>${fnsdddd}</div>
<div>moment</div><div>llll:</div><div>${moment().format("llll")}</div>
<div>date-fns</div><div>locale:ja の yyyy年M月d日(E) HH:mm:</div><div>${fnsH}</div>
<div>date-fns</div><div>locale:ja の yyyy年M月d日(E):</div><div>${fns}</div>
</div>
`;
このフォーマットがまとまっているページが次です。
date-fns – modern JavaScript date utility library
