SCALE — Build Lab
機能パターン · REACT COMPONENT

タイムゾーン変換

CATEGORY機能パターン TYPEReact Component EFFORT30〜60分 DIFFICULTY
PRIMARY CODE
ts
// UTC → 日本時間表示
export function fmtJP(iso: string) {
  return new Intl.DateTimeFormat('ja-JP', {
    timeZone: 'Asia/Tokyo',
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit',
  }).format(new Date(iso));
}

// 任意TZ
export function fmtInTZ(iso: string, tz: string) {
  return new Intl.DateTimeFormat('en-US', {
    timeZone: tz, dateStyle: 'short', timeStyle: 'short',
  }).format(new Date(iso));
}
前提条件
Tailwind CSS v4TypeScript 5
USE CASES
  • 任意のダッシュボードに組み込み

タイムゾーン変換

:LiTarget: 用途

UTC ⇄ 日本時間 ⇄ 任意TZ の変換。海外顧客対応の必須。

:LiSparkle: 特徴

  • Intl.DateTimeFormat
  • IANA TZ対応
  • 夏時間考慮
  • フォーマット指定

:LiCode: コード(コピペ用)

// UTC → 日本時間表示
export function fmtJP(iso: string) {
  return new Intl.DateTimeFormat('ja-JP', {
    timeZone: 'Asia/Tokyo',
    year: 'numeric', month: '2-digit', day: '2-digit',
    hour: '2-digit', minute: '2-digit',
  }).format(new Date(iso));
}

// 任意TZ
export function fmtInTZ(iso: string, tz: string) {
  return new Intl.DateTimeFormat('en-US', {
    timeZone: tz, dateStyle: 'short', timeStyle: 'short',
  }).format(new Date(iso));
}

:LiHandPointer: 使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

:LiAlertCircle: 注意事項

  • 依存パッケージを忘れず追加