FormatDateTime

Data Display

날짜·숫자·기간을 로케일에 맞춰 표시하는 대표 포맷터.

Usage

날짜와 시간을 직접 포맷하지 않고 현재 로케일·시간대에 맞춰 표시할 때 사용한다.

import

import { FormatDateTime } from '@mildang/design-system/Format';

API Reference

FormatDateTime Props

Prop

Type

Default

value

필수

string | number | Date

지정 안 함

locale

string

지정 안 함

options

DateTimeFormatOptions

지정 안 함

shortYear

boolean

지정 안 함

type

지정 안 함

같은 패밀리

@mildang/design-system/Format 에서 같이 내보내는 컴포넌트다.

FormatDateTimeRange

시작·종료 일시를 로케일에 맞춰 표시하는 Format 컴포넌트.

FormatDayOfWeek

날짜의 요일을 로케일에 맞춰 표시하는 Format 컴포넌트.

FormatDuration

ISO-8601 duration을 로케일에 맞춰 표시하는 Format 컴포넌트.

FormatFileSize

바이트 수를 로케일에 맞춰 파일 크기로 표시하는 Format 컴포넌트.

FormatNumber

숫자를 로케일에 맞춰 표시하는 Format 컴포넌트.

FormatPhoneNumber

전화번호를 국가별 형식에 맞춰 표시하는 Format 컴포넌트.

FormatRelativeTime

상대 시간을 로케일에 맞춰 표시하는 Format 컴포넌트.

FormatRelativeTimeFromDate

두 날짜의 차이를 로케일에 맞춰 상대 시간으로 표시하는 Format 컴포넌트.

예제

Default

코드

Open in Playground

import type { ComponentProps } from 'react';
import { FormatDateTime } from '@mildang/design-system/Format';

const value = '2024-07-13T17:06:00';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value,
    type: 'fullDate',
    shortYear: false,
  }) } as ComponentProps<typeof FormatDateTime>;

const FormatDateTimeDefaultExampleRender = (args: ComponentProps<typeof FormatDateTime>) => <FormatDateTime {...args} />;

export default function FormatDateTimeDefaultExample(props: Partial<ComponentProps<typeof FormatDateTime>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof FormatDateTime>;
  return FormatDateTimeDefaultExampleRender(mergedProps);
}

TimeOnly

코드

Open in Playground

import type { ComponentProps } from 'react';
import { FormatDateTime } from '@mildang/design-system/Format';

const value = '2024-07-13T17:06:00';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value,
    type: 'time',
  }) } as ComponentProps<typeof FormatDateTime>;

const FormatDateTimeTimeOnlyExampleRender = (args: ComponentProps<typeof FormatDateTime>) => <FormatDateTime {...args} />;

export default function FormatDateTimeTimeOnlyExample(props: Partial<ComponentProps<typeof FormatDateTime>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof FormatDateTime>;
  return FormatDateTimeTimeOnlyExampleRender(mergedProps);
}

WithShortYear

코드

Open in Playground

import type { ComponentProps } from 'react';
import { FormatDateTime } from '@mildang/design-system/Format';

const value = '2024-07-13T17:06:00';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value,
    type: 'fullDate',
    shortYear: true,
  }) } as ComponentProps<typeof FormatDateTime>;

const FormatDateTimeWithShortYearExampleRender = (args: ComponentProps<typeof FormatDateTime>) => <FormatDateTime {...args} />;

export default function FormatDateTimeWithShortYearExample(props: Partial<ComponentProps<typeof FormatDateTime>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof FormatDateTime>;
  return FormatDateTimeWithShortYearExampleRender(mergedProps);
}

CustomOptions

코드

Open in Playground

import type { ComponentProps } from 'react';
import { FormatDateTime } from '@mildang/design-system/Format';

const value = '2024-07-13T17:06:00';

const STORY_DEFAULT_ARGS = { ...({}), ...({
    value,
    options: {
      weekday: 'long',
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    },
  }) } as ComponentProps<typeof FormatDateTime>;

const FormatDateTimeCustomOptionsExampleRender = (args: ComponentProps<typeof FormatDateTime>) => <FormatDateTime {...args} />;

export default function FormatDateTimeCustomOptionsExample(props: Partial<ComponentProps<typeof FormatDateTime>>) {
  const mergedProps = { ...STORY_DEFAULT_ARGS, ...props } as ComponentProps<typeof FormatDateTime>;
  return FormatDateTimeCustomOptionsExampleRender(mergedProps);
}

Range

코드

Open in Playground

import { FormatDateTimeRange } from '@mildang/design-system/Format';

const FormatDateTimeRangeExample = () => (
    <FormatDateTimeRange
      startValue="2026-05-01T13:00:00"
      endValue="2026-05-15T18:00:00"
      type="dateTime"
    />
  );

export default FormatDateTimeRangeExample;