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-04-18

formatDateTime(now)

2026-04-18 13:45:36

formatRelativeTime(3h ago)

3시간 전

monthNames

dayNames

API 레퍼런스

반환값

이름	타입	설명
formatDate	(date: Date, options?: DateFormatterOptions) => string	docs:i18n.use-date-formatter.returns.formatDate
formatDateTime	(date: Date, options?: DateFormatterOptions) => string	docs:i18n.use-date-formatter.options.formatDateTime
formatRelativeTime	(date: Date, options?: RelativeTimeOptions) => string	docs:i18n.use-date-formatter.options.formatRelativeTime
monthNames	string[]	docs:i18n.use-date-formatter.options.monthNames
dayNames	string[]	docs:i18n.use-date-formatter.options.dayNames
formatDateLocalized	(date: Date, options?: LocaleDateFormatterOptions) => string	docs:i18n.use-date-formatter.options.formatDateLocalized
formatDateTimeLocalized	(date: Date, options?: LocaleDateFormatterOptions) => string	docs:i18n.use-date-formatter.options.formatDateTimeLocalized
locale	string	docs:i18n.use-date-formatter.returns.locale
currentLanguage	string	docs:i18n.use-date-formatter.options.currentLanguage

코드 예시

docs:i18n.use-date-formatter.examples.i18nexamplescalendarmonths

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