mcpField
1
1k-date-formatting

1k-date-formatting

github.com/onekeyhq開発2.5k70 回インストール今日更新
リポジトリ

1k-date-formatting について

OneKey の開発者向けに、共通ユーティリティ、オプション、React フックを使った日付と時刻の書式を統一するコーディングスキルです。

主な機能

  1. 01共通の日付・時刻ユーティリティ
  2. 02相対日付と経過時間の書式設定
  3. 03カスタム書式テンプレートとオプション
  4. 04動的な書式設定用 React フック
  5. 05ロケール対応の書式ガイド

活用シーン

  1. 01取引履歴の日付の書式設定
  2. 02相対タイムスタンプの表示
  3. 03カスタム日付書式の適用

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/onekeyhq/app-monorepo --skill 1k-date-formatting

インストール後、Claude Code で/1k-date-formattingを入力して読み込まれたか確認します。

同梱ファイルreferences/rules/date-formatting.md

詳細

日付のフォーマット

OneKey アプリケーション全体で日付と時刻のフォーマットを統一するためのガイドラインです。

重要なルール

ネイティブの JavaScript 日付メソッドは絶対に使用しないでください。

// ❌ FORBIDDEN
date.toLocaleDateString()
date.toLocaleString()
date.toISOString()
new Intl.DateTimeFormat().format(date)

// ✅ CORRECT
import { formatDate } from '@onekeyhq/shared/src/utils/dateUtils';
formatDate(date, { hideSeconds: true });

クイックリファレンス

関数用途出力例
formatDate(date, options?)日付と時刻全体2024/01/15, 14:30
formatTime(date, options?)時刻のみ14:30:45
formatRelativeDate(date)相対表示今日, 昨日
formatDistanceToNow(date)経過時間2時間前
formatDateFns(date, format?)カスタムフォーマットテンプレートに基づく

よく使うパターン

トランザクション履歴
import { formatDate } from '@onekeyhq/shared/src/utils/dateUtils';

// Hide year if current year, hide seconds
<SizableText>
  {formatDate(item.createdAt, { hideTheYear: true, hideSeconds: true })}
</SizableText>
カスタムフォーマット
// Use format template
{formatDate(item.timestamp, { formatTemplate: 'yyyy-LL-dd HH:mm' })}
React Hook(動的な更新用)
import useFormatDate from '@onekeyhq/kit/src/hooks/useFormatDate';

function MyComponent() {
  const { formatDate } = useFormatDate();
  return <SizableText>{formatDate(date, { hideSeconds: true })}</SizableText>;
}

フォーマットオプション

interface IFormatDateOptions {
  hideYear?: boolean;        // Always hide year
  hideMonth?: boolean;       // Always hide month
  hideTheYear?: boolean;     // Hide year if current year
  hideTheMonth?: boolean;    // Hide month if current month
  hideTimeForever?: boolean; // Hide time portion
  hideSeconds?: boolean;     // Hide seconds (HH:mm)
  formatTemplate?: string;   // Custom date-fns format
}

詳細ガイド

日付のフォーマットに関する包括的なルールと例については、date-formatting.md を参照してください。

対象トピック:

  • @onekeyhq/shared/src/utils/dateUtils のコアユーティリティ
  • 利用可能なフォーマット関数
  • オプションのリファレンスとフォーマットテンプレート
  • トランザクション、履歴、相対時間の一般的なパターン
  • 動的更新用の React Hook
  • ロケールに応じたフォーマット
  • 実例
  • トラブルシューティング

主要なファイル

目的ファイルパス
コアユーティリティpackages/shared/src/utils/dateUtils.ts
React Hookpackages/kit/src/hooks/useFormatDate.ts
ロケールマッピングpackages/shared/src/locale/dateLocaleMap.ts

関連スキル

  • /1k-i18n - 国際化とロケールの処理
  • /1k-coding-patterns - 一般的なコーディングパターン

コメント