1K Date Formatting

What it does

This skill, "1K Date Formatting," provides a consistent and unified way to format dates and times within OneKey applications. It prevents the use of native JavaScript date methods by leveraging utilities from @onekeyhq/shared/src/utils/dateUtils for accurate and standardized formatting. The skill offers various functions including full date/time, time-only, relative display (e.g., "Today," "Yesterday"), distance to now (e.g., "2 hours ago"), and custom format options using date-fns templates.

When to use it

• Displaying transaction history with consistent date formatting.
• Creating user interfaces where dates need to be presented in a unified style.
• Generating reports or data exports requiring standardized date formats.
• Dynamically updating date displays within React components using the provided useFormatDate hook.
• When needing to hide specific parts of a date (year, month, time, seconds) for clarity and brevity.

Key capabilities

• formatDate(date, options?): Formats dates with various options like hiding year/month or specifying custom formats.
• formatTime(date, options?): Formats only the time portion of a date.
• formatRelativeDate(date): Displays dates in relative terms (Today, Yesterday).
• formatDistanceToNow(date): Shows the time elapsed since a given date.
• formatDateFns(date, format?): Allows for custom formatting using date-fns templates.
• React hook useFormatDate(): Provides dynamic date formatting updates within React components.
• Options to hide year, month, time, and seconds.

Example prompts

• "Format this date as yyyy-LL-dd HH:mm: 2024-01-15T14:30:00Z"
• "Show me the relative date for January 1st, 2024."
• "What is the time only format of this date? 2024-01-15T14:30:00Z"

Tips & gotchas

• Important: This skill requires using the @onekeyhq/shared/src/utils/dateUtils library and its functions. Avoid using native JavaScript date methods like toLocaleDateString() or toISOString().
• Refer to the detailed guide (date-formatting.md) for comprehensive formatting rules, options reference, and troubleshooting tips.
• The React hook useFormatDate simplifies dynamic date updates within React components.