useDateFormatter

훅

@hua-labs/i18n-formatters

날짜 포맷팅 기능을 제공하는 훅입니다. 로케일에 맞는 날짜 형식, 상대 시간, 월/요일 이름을 제공합니다.

설치

Terminalbash

npm install @hua-labs/i18n-formatters

Importtsx

import { useDateFormatter } from '@hua-labs/i18n-formatters';

기본 사용법

tsx

import { useDateFormatter } from '@hua-labs/i18n-formatters';

function DateDisplay() {
  const { formatDate, formatRelativeTime } = useDateFormatter();
  const now = new Date();
  const posted = new Date('2024-01-10');

  return (
    <div>
      <p>Today: {formatDate(now)}</p>
      <p>Posted: {formatRelativeTime(posted)}</p>
    </div>
  );
}

라이브 데모

날짜 포맷팅

formatDate(now)

2026-02-21

formatDateTime(now)

2026-02-21 02:36:05

formatRelativeTime(3h ago)

3시간 전

monthNames

dayNames

API 레퍼런스

반환값


formatDate	(date: Date, options?: DateFormatterOptions) => string	Format date to localized string
formatDateTime	(date: Date, options?: DateFormatterOptions) => string	Format date with time
formatRelativeTime	(date: Date, options?: RelativeTimeOptions) => string	Format as relative time (e.g., 3 hours ago)
monthNames	string[]	Localized month names from translation data
dayNames	string[]	Localized day names from translation data
formatDateLocalized	(date: Date, options?: LocaleDateFormatterOptions) => string	Format date using Intl.DateTimeFormat locale-aware formatting
formatDateTimeLocalized	(date: Date, options?: LocaleDateFormatterOptions) => string	Format date+time using Intl.DateTimeFormat locale-aware formatting
locale	string	Current locale string (e.g., 'ko-KR', 'en-US')
currentLanguage	string	Current active language code

코드 예시

i18n:examples.calendarMonths

tsx

import { useDateFormatter } from '@hua-labs/i18n-formatters';

function Calendar() {
  const { monthNames, dayNames } = useDateFormatter();

  return (
    <div>
      <div className="flex gap-2">
        {dayNames.map((day, i) => (
          <span key={i} className="w-10 text-center">{day}</span>
        ))}
      </div>
      <select>
        {monthNames.map((month, i) => (
          <option key={i} value={i}>{month}</option>
        ))}
      </select>
    </div>
  );
}

사용 사례

타임스탬프 표시

로케일에 맞는 날짜/시간 표시

활동 피드

상대 시간으로 활동 내역 표시

캘린더 앱

로컬라이즈된 월/요일 이름 표시

대시보드 지표

날짜 범위와 타임스탬프 표시

useLanguageChange useNumberFormatter