浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【JavaScript】date-fns による日本語日時フォーマット

 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

  • この記事いいね! (0)