1k-date-formatting について
OneKey の開発者向けに、共通ユーティリティ、オプション、React フックを使った日付と時刻の書式を統一するコーディングスキルです。
主な機能
- 01共通の日付・時刻ユーティリティ
- 02相対日付と経過時間の書式設定
- 03カスタム書式テンプレートとオプション
- 04動的な書式設定用 React フック
- 05ロケール対応の書式ガイド
活用シーン
- 01取引履歴の日付の書式設定
- 02相対タイムスタンプの表示
- 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 Hook | packages/kit/src/hooks/useFormatDate.ts |
| ロケールマッピング | packages/shared/src/locale/dateLocaleMap.ts |
関連スキル
/1k-i18n- 国際化とロケールの処理/1k-coding-patterns- 一般的なコーディングパターン
コメント
Markdown 対応