DatePicker

날짜 선택 컴포넌트는 사용자가 캘린더에서 날짜를 선택할 수 있는 폼 요소입니다.

기본 사용법

'use client';

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

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

  return (
    <div className="max-w-md space-y-4">
      <DatePicker date={date} onDateChange={setDate} />
    </div>
  );
}

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

Placeholder

DatePicker에 플레이스홀더를 설정할 수 있습니다.

'use client';

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

export default function Placeholder() {
  const [date1, setDate1] = useState<Date | undefined>(undefined);
  const [date2, setDate2] = useState<Date | undefined>(undefined);

  return (
    <div className="max-w-md space-y-4">
      <DatePicker
        date={date1}
        onDateChange={setDate1}
        placeholder="날짜를 선택하세요"
      />
      <DatePicker
        date={date2}
        onDateChange={setDate2}
        placeholder="시작일 선택"
      />
    </div>
  );
}

'use client';import { useState } from 'react';import { DatePicker } from '@aift/ui/DatePicker';export default function Placeholder() {  const [date1, setDate1] = useState<Date | undefined>(undefined);  const [date2, setDate2] = useState<Date | undefined>(undefined);  return (    <div className="max-w-md space-y-4">      <DatePicker        date={date1}        onDateChange={setDate1}        placeholder="날짜를 선택하세요"      />      <DatePicker        date={date2}        onDateChange={setDate2}        placeholder="시작일 선택"      />    </div>  );}

Format

날짜 표시 형식을 설정할 수 있습니다. dayjs 형식을 사용합니다.

'use client';

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

export default function Format() {
  const [date, setDate] = useState<Date | undefined>(new Date());

  return (
    <div className="max-w-md space-y-4">
      <DatePicker date={date} onDateChange={setDate} format="YYYY-MM-DD" />
      <DatePicker
        date={date}
        onDateChange={setDate}
        format="YYYY년 MM월 DD일"
      />
      <DatePicker date={date} onDateChange={setDate} format="MM/DD/YYYY" />
    </div>
  );
}

'use client';import { useState } from 'react';import { DatePicker } from '@aift/ui/DatePicker';export default function Format() {  const [date, setDate] = useState<Date | undefined>(new Date());  return (    <div className="max-w-md space-y-4">      <DatePicker date={date} onDateChange={setDate} format="YYYY-MM-DD" />      <DatePicker        date={date}        onDateChange={setDate}        format="YYYY년 MM월 DD일"      />      <DatePicker date={date} onDateChange={setDate} format="MM/DD/YYYY" />    </div>  );}

Disabled

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

'use client';

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

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

  return (
    <div className="max-w-md space-y-4">
      <DatePicker date={date} onDateChange={setDate} />
      <DatePicker date={date} onDateChange={setDate} disabled />
    </div>
  );
}

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

Sizes

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

xsmall

small

medium

large

xlarge

'use client';

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

export default function Sizes() {
  const [dateXsmall, setDateXsmall] = useState<Date | undefined>(undefined);
  const [dateSmall, setDateSmall] = useState<Date | undefined>(undefined);
  const [dateMedium, setDateMedium] = useState<Date | undefined>(undefined);
  const [dateLarge, setDateLarge] = useState<Date | undefined>(undefined);
  const [dateXlarge, setDateXlarge] = 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>
        <DatePicker
          size="xsmall"
          date={dateXsmall}
          onDateChange={setDateXsmall}
          placeholder="날짜 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">small</p>
        <DatePicker
          size="small"
          date={dateSmall}
          onDateChange={setDateSmall}
          placeholder="날짜 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">medium</p>
        <DatePicker
          size="medium"
          date={dateMedium}
          onDateChange={setDateMedium}
          placeholder="날짜 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">large</p>
        <DatePicker
          size="large"
          date={dateLarge}
          onDateChange={setDateLarge}
          placeholder="날짜 선택"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">xlarge</p>
        <DatePicker
          size="xlarge"
          date={dateXlarge}
          onDateChange={setDateXlarge}
          placeholder="날짜 선택"
        />
      </div>
    </div>
  );
}

'use client';import { useState } from 'react';import { DatePicker } from '@aift/ui/DatePicker';export default function Sizes() {  const [dateXsmall, setDateXsmall] = useState<Date | undefined>(undefined);  const [dateSmall, setDateSmall] = useState<Date | undefined>(undefined);  const [dateMedium, setDateMedium] = useState<Date | undefined>(undefined);  const [dateLarge, setDateLarge] = useState<Date | undefined>(undefined);  const [dateXlarge, setDateXlarge] = 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>        <DatePicker          size="xsmall"          date={dateXsmall}          onDateChange={setDateXsmall}          placeholder="날짜 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">small</p>        <DatePicker          size="small"          date={dateSmall}          onDateChange={setDateSmall}          placeholder="날짜 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">medium</p>        <DatePicker          size="medium"          date={dateMedium}          onDateChange={setDateMedium}          placeholder="날짜 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">large</p>        <DatePicker          size="large"          date={dateLarge}          onDateChange={setDateLarge}          placeholder="날짜 선택"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">xlarge</p>        <DatePicker          size="xlarge"          date={dateXlarge}          onDateChange={setDateXlarge}          placeholder="날짜 선택"        />      </div>    </div>  );}

Props

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

DatePicker

기본 사용법

Placeholder

Format

Disabled

Sizes

Props

On this page