Date Formatting

Common Patterns

Transaction History

import { formatDate } from '@{scope}/shared/src/utils/dateUtils';

// Hide year if current year, hide seconds
<Text>
  {formatDate(item.createdAt, { hideTheYear: true, hideSeconds: true })}
</Text>

Custom Format

// Use format template
{formatDate(item.timestamp, { formatTemplate: 'yyyy-LL-dd HH:mm' })}

React Hook (for dynamic updates)

import { useFormatDate } from '@{scope}/kit/src/hooks/useFormatDate';

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

Format Options

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
}

Detailed Guide

For comprehensive date formatting rules and examples, see date-formatting.md.

Topics covered:

• Core utilities for date formatting
• Available formatting functions
• Options reference and format templates
• Common patterns for transactions, history, and relative time
• React hooks for dynamic updates
• Locale-aware formatting
• Real-world examples
• Troubleshooting

Key Files (Example Structure)

Related Skills

• /i18n - Internationalization and locale handling
• /coding-patterns - General coding patterns