Skip to main content
Designkufu

smarthr-ui-date-formatter

DateFormatterは、日付データを任意の形式にフォーマットして表示するコンポーネントです。日付をユーザーの言語や地域設定に適した形式で表示するときに使います。

Stars
30
Source
kufu/smarthr-design-system
Updated
2026-05-29
Slug
kufu--smarthr-design-system--smarthr-ui-date-formatter
View on GitHubRaw SKILL.md

// install — copy + paste into any project

mkdir -p .claude/skills && curl -fsSL https://raw.githubusercontent.com/kufu/smarthr-design-system/HEAD/plugins/smarthr-design-system/skills/smarthr-ui-date-formatter/SKILL.md -o .claude/skills/smarthr-ui-date-formatter.md

Drops the SKILL.md into .claude/skills/smarthr-ui-date-formatter.md. Works with Claude Code, Cursor, and any agent that loads SKILL.md files from .claude/skills/.

日付データを任意の形式にフォーマットして表示するコンポーネントです。日付をユーザーの言語や地域設定に適した形式で表示するときに使います。

import

import { DateFormatter } from 'smarthr-ui'

Props

Props 名 デフォルト値 必須 説明
parts readonly [DatePart, ...DatePart[]] - - 表示する日付のパーツ。指定しない場合は全て表示
options DateTimeFormatOptions & { disableSlashInJa?: boolean; capitalizeFirstLetter?: boolean; } - - フォーマットオプション
date string | Date - -

実装ルール

DateFormatter に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。

使い方チェックリスト

使用上の注意 > 日付をフォーマットする機能だけ必要な場合

  • [must] フォーマットされた日付の文字列だけが必要な場合は useIntlformatDate を使う