Tempoで日付変換

はじめに

今回は、たまたま便利なJavaScript・TypeScriptライブラリを見つけたので記事にします。本記事では、JavaScript・TypeScriptで使える日付データを操作することができる「Tempo」でDate型のデータを変換してみます。
参考：公式ドキュメント(https://tempo.formkit.com/)

インストール

今回は、npmでインストールしました。公式ドキュメントによると、Tempoはpnpm・npm・yarn・bunでインストールすることができるとのことです。

npm install @formkit/tempo

単純な日付形式の指定

現在日付の日付形式を指定してみます。下記の場合は、「yyyy年m月d日」の形式で現在日付を表示することができます。

index.ts

import { format } from "@formkit/tempo"

const date = new Date()

format(date, "medium", "zh")

異なる日付形式間の形式変換

今回は、APIから「YYYY-MM-DDhhsssZ」形式で取得したDateデータを「YYYY/MM/DD」に変換します。

index.ts

import { format } from "@formkit/tempo"

// 日付の形式をYYYY-MM-DDThh:mm:sssZからYYYY/MM/DDに変換する
function convertDate(date: string): string {
  const oldDate = new Date(date);
  return format(oldDate, "YYYY/MM/DD", "ja")
}

console.log(convertDate("2024-04-01T10:00:000Z"))
// -> 2024/04/01

様々な日付文字列の形式変換

parseメソッドを使えば、様々な形式の日付(+時間)っぽい文字列をDateデータに変換することができます。

index.ts

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

// 日付の形式をMM/DD/YYYYからYYYY-MM-DDThh:mm:sssZに変換する
function convertToDate(dateSlash: string): string {
  return parse(dateSlash, "MM/DD/YYYY")
}

// 日付の形式をYYYY-MM-DDThh:mm:sssZからYYYY/MM/DDに変換する
function convertDateFormat(date: string): string {
  const oldDate = new Date(date);
  return format(oldDate, "YYYY/MM/DD", "ja")
}

console.log(convertDateFormat(convertDate("04/01/2024")))
// -> 2024/04/01

終わりに

この他、Tempoでは日付・時間っぽい文字列を使って、日時の加減算をすることもできるようです。私は、microCMSからの日時データを加工する際に使用しましたが、あまり使わないような日付(+時間)っぽい文字列を簡単に加工できるため、便利なライブラリだと感じました。個人的には、JavaScriptやTypeScriptの日付形式の変換はめんどくさいと思っていたのですが、このライブラリでそれがかなり楽になりそうなので、今後も使っていこうと思います。