day.jsを使ってたけど、サイズも小さく軽量とのことで、
ちょっと試してみたときの備忘録(*´ω`*)
FormKitのチームが開発したらしい
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)
操作関数も豊富
日付の追加はこんな感じ。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は上がっているようなので、そのうち対応されるかも?
以上!! シンプルでよさそうなライブラリ(*´ω`*)