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

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

くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

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

Tempoとは

操作関数も豊富

formatのpresetも豊富

参考にしたサイトさま