MultipleDatePicker

여러 날짜를 선택할 수 있는 날짜 선택 컴포넌트입니다. 팝오버에서 날짜를 여러 개 선택한 뒤 확인을 눌렀을 때만 onDateChange로 값이 전달됩니다.

기본 사용법

'use client';

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

export default function Preview() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <div className="max-w-md space-y-4">
      <MultipleDatePicker dates={dates} onDateChange={setDates} />
    </div>
  );
}

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

Placeholder

날짜가 선택되지 않았을 때 표시할 텍스트를 지정할 수 있습니다.

'use client';

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

export default function Placeholder() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <div className="max-w-md space-y-4">
      <MultipleDatePicker
        placeholder="날짜를 선택하세요"
        dates={dates}
        onDateChange={setDates}
      />
    </div>
  );
}

'use client';import { useState } from 'react';import { MultipleDatePicker } from '@aift/ui/MultipleDatePicker';export default function Placeholder() {  const [dates, setDates] = useState<Date[]>([]);  return (    <div className="max-w-md space-y-4">      <MultipleDatePicker        placeholder="날짜를 선택하세요"        dates={dates}        onDateChange={setDates}      />    </div>  );}

Format

트리거에 표시되는 날짜 형식을 설정할 수 있습니다. dayjs 형식을 사용합니다.

'use client';

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

export default function Format() {
  const [dates, setDates] = useState<Date[]>([]);

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

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

Disabled

비활성화 상태로 설정할 수 있습니다.

'use client';

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

export default function Disabled() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <div className="max-w-md space-y-4">
      <MultipleDatePicker dates={dates} onDateChange={setDates} />
      <MultipleDatePicker dates={dates} onDateChange={setDates} disabled />
    </div>
  );
}

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

Sizes

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

'use client';

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

export default function Sizes() {
  const [dates, setDates] = useState<Date[]>([]);

  return (
    <div className="max-w-md space-y-3">
      <MultipleDatePicker size="xsmall" dates={dates} onDateChange={setDates} />
      <MultipleDatePicker size="small" dates={dates} onDateChange={setDates} />
      <MultipleDatePicker size="medium" dates={dates} onDateChange={setDates} />
      <MultipleDatePicker size="large" dates={dates} onDateChange={setDates} />
      <MultipleDatePicker size="xlarge" dates={dates} onDateChange={setDates} />
      <MultipleDatePicker size="extra" dates={dates} onDateChange={setDates} />
    </div>
  );
}

'use client';import { useState } from 'react';import { MultipleDatePicker } from '@aift/ui/MultipleDatePicker';export default function Sizes() {  const [dates, setDates] = useState<Date[]>([]);  return (    <div className="max-w-md space-y-3">      <MultipleDatePicker size="xsmall" dates={dates} onDateChange={setDates} />      <MultipleDatePicker size="small" dates={dates} onDateChange={setDates} />      <MultipleDatePicker size="medium" dates={dates} onDateChange={setDates} />      <MultipleDatePicker size="large" dates={dates} onDateChange={setDates} />      <MultipleDatePicker size="xlarge" dates={dates} onDateChange={setDates} />      <MultipleDatePicker size="extra" dates={dates} onDateChange={setDates} />    </div>  );}

Props

Prop	Type	Default	Description
dates	`Date[]`	-	선택된 날짜 목록
onDateChange	`(dates: Date[]) => void`	-	확인(Confirm) 시 선택된 날짜 목록 전달
onDatesChange	`(dates: Date[]) => void`	-	(Deprecated) `onDateChange` 사용
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'`	트리거 버튼의 크기 (높이, 둥근 모서리)