Zenn
🗓️

日付の範囲を表示するには little-date が便利そう

2024/09/01に公開
Vercel
date
tech

はじめに

little-date は日付の範囲を短く、読みやすい形式でフォーマットするライブラリです。Vercel から出てて、date-fns をベースにしています。また、ローカライゼーションにも対応してて、Node.js とブラウザのどちらでも使えるようです。

実装

import { formatDateRange } from "little-date";

const from = new Date("2023-01-01T00:00:00.000Z");
const to = new Date("2023-01-12T23:59:59.999Z");

formatDateRange(from, to); // Outputs: "Jan 1 - 12"

formatDateRange 関数にオプションを渡すと、出力をカスタマイズできます。

  • 日付の言語
  • 時間の表示
  • today 日付の変更（テストに便利）
  • セパレーターの変更（Jan 1 - 12 の - を to にするなど）
import { formatDateRange } from "little-date";

// ...

formatDateRange(from, to, {
  locale: "de-AT", // Overwrite the default locale
  includeTime: false, // Prevent time from being displayed
  today: new Date(), // Overwrite the default "today" date, useful for testing
  separator: "-", // Overwrite the default separator. E.g. from "Jan 1 - 12" to "Jan 1 to 12"
});

little-date はシンプルである為、カスタマイズのオプションは最小限になっています。その他のオプションが必要な場合は、src/format-date-range.ts の実装をご自身のリポジトリにコピーして、ニーズに応じて修正することが推奨されています。

表示例

little-date を使用すると、以下のように日付の範囲を表示できます。

  • Jan 1 - 12
  • Jan 3 - Apr 20
  • January 2023
  • Q1 2023

https://github.com/vercel/little-date?tab=readme-ov-file#formatting-examples

参照

https://github.com/vercel/little-date

Discussion