DateTimePicker

날짜·시간 선택 컴포넌트는 캘린더와 시간 선택 패널을 함께 사용해 날짜와 시간을 선택할 수 있는 폼 요소입니다.

기본 사용법

'use client';

import { useState } from 'react';
import { DateTimePicker } from '@aift/ui/DateTimePicker';

export default function Preview() {
  const [value, setValue] = useState<Date | undefined>(undefined);

  return (
    <div className="max-w-md space-y-4">
      <DateTimePicker value={value} onChange={setValue} />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateTimePicker } from '@aift/ui/DateTimePicker';export default function Preview() {  const [value, setValue] = useState<Date | undefined>(undefined);  return (    <div className="max-w-md space-y-4">      <DateTimePicker value={value} onChange={setValue} />    </div>  );}

Sizes

트리거 버튼의 크기와 둥근 모서리를 설정할 수 있습니다.

xsmall

small

medium

large

xlarge

'use client';

import { useState } from 'react';
import { DateTimePicker } from '@aift/ui/DateTimePicker';

export default function Sizes() {
  const [valueXsmall, setValueXsmall] = useState<Date | undefined>(undefined);
  const [valueSmall, setValueSmall] = useState<Date | undefined>(undefined);
  const [valueMedium, setValueMedium] = useState<Date | undefined>(undefined);
  const [valueLarge, setValueLarge] = useState<Date | undefined>(undefined);
  const [valueXlarge, setValueXlarge] = useState<Date | undefined>(undefined);

  return (
    <div className="max-w-md space-y-6">
      <div>
        <p className="text-sm text-neutral-60 mb-3">xsmall</p>
        <DateTimePicker
          size="xsmall"
          value={valueXsmall}
          onChange={setValueXsmall}
          placeholder="날짜·시간 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">small</p>
        <DateTimePicker
          size="small"
          value={valueSmall}
          onChange={setValueSmall}
          placeholder="날짜·시간 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">medium</p>
        <DateTimePicker
          size="medium"
          value={valueMedium}
          onChange={setValueMedium}
          placeholder="날짜·시간 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">large</p>
        <DateTimePicker
          size="large"
          value={valueLarge}
          onChange={setValueLarge}
          placeholder="날짜·시간 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">xlarge</p>
        <DateTimePicker
          size="xlarge"
          value={valueXlarge}
          onChange={setValueXlarge}
          placeholder="날짜·시간 선택"
        />
      </div>
    </div>
  );
}

'use client';import { useState } from 'react';import { DateTimePicker } from '@aift/ui/DateTimePicker';export default function Sizes() {  const [valueXsmall, setValueXsmall] = useState<Date | undefined>(undefined);  const [valueSmall, setValueSmall] = useState<Date | undefined>(undefined);  const [valueMedium, setValueMedium] = useState<Date | undefined>(undefined);  const [valueLarge, setValueLarge] = useState<Date | undefined>(undefined);  const [valueXlarge, setValueXlarge] = useState<Date | undefined>(undefined);  return (    <div className="max-w-md space-y-6">      <div>        <p className="text-sm text-neutral-60 mb-3">xsmall</p>        <DateTimePicker          size="xsmall"          value={valueXsmall}          onChange={setValueXsmall}          placeholder="날짜·시간 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">small</p>        <DateTimePicker          size="small"          value={valueSmall}          onChange={setValueSmall}          placeholder="날짜·시간 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">medium</p>        <DateTimePicker          size="medium"          value={valueMedium}          onChange={setValueMedium}          placeholder="날짜·시간 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">large</p>        <DateTimePicker          size="large"          value={valueLarge}          onChange={setValueLarge}          placeholder="날짜·시간 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">xlarge</p>        <DateTimePicker          size="xlarge"          value={valueXlarge}          onChange={setValueXlarge}          placeholder="날짜·시간 선택"        />      </div>    </div>  );}

Disabled

DateTimePicker를 비활성화할 수 있습니다.

'use client';

import { useState } from 'react';
import { DateTimePicker } from '@aift/ui/DateTimePicker';

export default function Disabled() {
  const [value, setValue] = useState<Date | undefined>(new Date());

  return (
    <div className="max-w-md space-y-4">
      <DateTimePicker value={value} onChange={setValue} />
      <DateTimePicker value={value} onChange={setValue} disabled />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateTimePicker } from '@aift/ui/DateTimePicker';export default function Disabled() {  const [value, setValue] = useState<Date | undefined>(new Date());  return (    <div className="max-w-md space-y-4">      <DateTimePicker value={value} onChange={setValue} />      <DateTimePicker value={value} onChange={setValue} disabled />    </div>  );}

Props

Prop	Type	Default	Description
value	`Date`	-	선택된 날짜·시간
onChange	`(date: Date \| undefined) => void`	-	날짜·시간 변경 핸들러
placeholder	`string`	`'날짜·시간 선택'`	플레이스홀더 텍스트
disabled	`boolean`	`false`	비활성화 여부
className	`string`	-	추가 CSS 클래스
dateFormat	`string`	`'YYYY/MM/DD'`	날짜 표시 형식 (dayjs)
timeFormat	`string`	`'A h:mm'`	시간 표시 형식 (dayjs)
size	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'`	`'medium'`	트리거 버튼의 크기 (높이, 둥근 모서리)

DateTimePicker

기본 사용법

Sizes

Disabled

Props

On this page