新しい日付ライブラリのTempoをさわってみた

day.jsを使ってたけど、サイズも小さく軽量とのことで、
ちょっと試してみたときの備忘録(*´ω｀*)

tempo.formkit.com

FormKitのチームが開発したらしい

formkit.com

Tempoとは

nativeのDateを操作するユーティリティなライブラリ。
day.jsとは違い、Date自体を直接操作する感じ。

import { format, parse } from "@formkit/tempo"

// Dateのformat
const readable = format(new Date(), "full")

// Dateへのparse
parse(readable, "full")

タイムゾーンのサポートも手厚い。

import { tzDate, format, applyOffset, offset } from "@formkit/tempo"

// タイムゾーンを考慮した新しいDateを作成
const newYorkDate = tzDate("2013-11-18 12:00", "America/New_York");

// タイムゾーンを指定したformat
format({ new Date(), format: "hh:mm a", tz: "America/New_York" });


// タイムゾーンオフセットの取得
const lisbonOffset = offset("2025-03-25 09:30", "Europe/Lisbon")
// オフセットの適用
applyOffset("2025-03-25 09:30", lisbonOffset)

操作関数も豊富

• Modify | Tempo • Dates by FormKit

日付の追加はこんな感じ。substructはなく、マイナスを指定する

import { addDay } from "@formkit/tempo"

// Add 5 days
addDay("2013-03-15", 5)

日付以外にも、便利がのが多くてありがたい

• weekStart/weekEnd
• monthStart/monthEnd
• yearStart/yearEnd

ただ、weekStartなどは、tzDataを渡しても、
タイムゾーンの影響を受けるっぽいので注意が必要かも。

import { tzDate, weekStart } from "@formkit/tempo";

const now = tzDate("2024-02-01", "UTC");
console.debug(now.toISOString());
// => 2024-02-01T00:00:00.000Z

const weekStartDay = weekStart(now, 1);
console.debug(weekStartDay.toISOString());
// => 2024-01-28T15:00:00.000Z

const tzStartDay = tzDate(weekStartDay, "Asia/Tokyo");
console.debug(tzStartDay.toISOString());
// => 2024-01-28T15:00:00.000Z

formatのpresetも豊富

full/long/midium/shortのスタイルが用意されていて、
日付と時間、それぞれで指定できる。

import { format } from "@formkit/tempo"

const date = new Date()

format(date, { date: "full", time: "short" })
format(date, { date: "medium", time: "long" })

// localeの指定もOK
format(date, "full", "it")

もちろん、自由に組み立てることもできるけど、
millisecondには対応してないよう。。

import { format } from "@formkit/tempo"

const locale = "en"
const date = new Date()
format(date, "YYYY-MM-DD HH:mm:ss", locale)

Issueは上がっているようなので、そのうち対応されるかも？

• Support for milliseconds · Issue #13 · formkit/tempo

---

以上!! シンプルでよさそうなライブラリ(*´ω｀*)

参考にしたサイトさま

• 新たなJavaScript日付操作ライブラリ「Tempo」登場 ー ネイティブなDateと直接連携、小さく、速く、使いやすく - TechFeed
• formkit/tempo: 📆 Parse, format, manipulate, and internationalize dates and times in JavaScript and TypeScript.