日時範囲の書式をWebサイトやスマホアプリのUIで読みやすく、理解しやすくするフォーマッタ -little-date

Post on:2025年1月22日

little-dateの特徴

WebサイトやスマホアプリのUIで日時範囲を表示するときに、日時の範囲が長すぎたり、繰り返しが多かったりして、読みにくいことがよくあります。little-dateは日時範囲を短く、読みやすく、理解しやすくすることでこの問題を解決します。

たとえば、下記をご覧ください。

// よく見かける長いフォーマット
console.log(`${from.toLocaleString()} - ${to.toLocaleString()}`);
// Output: "1/1/2025, 00:00:00 AM - 1/12/2025, 23:59:59 PM"

// little-dateを使用した場合のフォーマット
console.log(formatDateRange(from, to));
// Output: "Jan 1 - 12"

// よく見かける長いフォーマット

console.log(`${from.toLocaleString()} - ${to.toLocaleString()}`);

// Output: "1/1/2025, 00:00:00 AM - 1/12/2025, 23:59:59 PM"

// little-dateを使用した場合のフォーマット

console.log(formatDateRange(from, to));

// Output: "Jan 1 - 12"

little-dateは、date-fnsをベースにしており、さまざまな国のローカライズもサポートしています。

Jan 1 - 12
Jan 3 - Apr 20
January 2025
Q1 2025

日時のフォーマットの完全版は、次の「日時範囲のフォーマット」をご覧ください。

日時範囲のフォーマット

little-dateの日時範囲のフォーマットは、下記の通りです。

概要	出力
複数の日で同じ月	`Jan 1 - 12`
複数の日で異なる月	`Jan 3 - Apr 20`
終日	`Wed, Jan 1`
異なる年に渡る範囲	`Jan 1 '22 - Jan 20 '25`
複数の日、同じ月、過去一年	`Jan 1 - 12, 2025`
特定の日、過去一年	`Wed, Jan 1, 2025`
特別なケース
通年	`2025`
四半期範囲	`Q1 2025`
1ヵ月	`January 2025`
複数の月	`Jan - Feb 2025`
時間
時間の範囲	`12am - 2:30pm`
異なる時間、同じ日	`Jan 1, 12:11am - 2:30pm`
異なる時間、同じ日、24時間表記	`Jan 1, 0:11 - 14:30`
1日内での時間の範囲	`Jan 1, 12pm - 12:59pm`
時間も日も異なる範囲	`Jan 1, 12:11am - Jan 2, 2:30pm`
時間も日も年も異なる範囲	`Jan 1 '22, 12:11am - Jan 2 '23, 2:30pm`
年が異なり時間はなし	`Jan 1 '24 - Jan 2 '25`

little-dateの使い方

NPM経由でインストールするには、下記のコマンドを入力します。

npm i little-date

1	npm i little-date

PNPMもサポートしています。

pnpm i little-date

1	pnpm i little-date

日時範囲のフォーマットは固定されており、変更はできません。ただし、出力をカスタマイズするためのオプションは用意されています。

import { formatDateRange } from "little-date";

// ...

formatDateRange(from, to, {
  locale: "ja", // デフォルトの式言語を変更する
  includeTime: false, // 時間を非表示にする
  today: new Date(), // デフォルトの「今日」の日付を上書きする
  separator: "-", // デフォルトの区切り文字を変更する（「Jan 1 - 12」を「Jan 1 to 12」にするなど）
});