DateRangePicker

시작일과 종료일을 선택할 수 있는 날짜 범위 선택 컴포넌트입니다.

기본 사용법

'use client';

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

export default function Preview() {
  const [range, setRange] = useState<DateRange>({});

  return (
    <div className="max-w-md space-y-4">
      <DateRangePicker range={range} onRangeChange={setRange} />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateRangePicker, DateRange } from '@aift/ui/DatePicker';export default function Preview() {  const [range, setRange] = useState<DateRange>({});  return (    <div className="max-w-md space-y-4">      <DateRangePicker range={range} onRangeChange={setRange} />    </div>  );}

Placeholder

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

'use client';

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

export default function Placeholder() {
  const [range, setRange] = useState<DateRange>({});

  return (
    <div className="max-w-md space-y-4">
      <DateRangePicker
        range={range}
        onRangeChange={setRange}
        placeholder="시작일 ~ 종료일"
      />
      <DateRangePicker
        range={range}
        onRangeChange={setRange}
        placeholder="기간을 선택하세요"
      />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateRangePicker, DateRange } from '@aift/ui/DatePicker';export default function Placeholder() {  const [range, setRange] = useState<DateRange>({});  return (    <div className="max-w-md space-y-4">      <DateRangePicker        range={range}        onRangeChange={setRange}        placeholder="시작일 ~ 종료일"      />      <DateRangePicker        range={range}        onRangeChange={setRange}        placeholder="기간을 선택하세요"      />    </div>  );}

Format

format을 통해 날짜 표시 형식을 지정할 수 있습니다. dayjs 포맷 문자열을 사용합니다.

'use client';

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

export default function Format() {
  const [range1, setRange1] = useState<DateRange>({
    startDate: new Date(2025, 0, 11),
    endDate: new Date(2025, 0, 18),
  });
  const [range2, setRange2] = useState<DateRange>({
    startDate: new Date(2025, 0, 11),
    endDate: new Date(2025, 0, 18),
  });
  const [range3, setRange3] = useState<DateRange>({
    startDate: new Date(2025, 0, 11),
    endDate: new Date(2025, 0, 18),
  });

  return (
    <div className="max-w-md space-y-4">
      <DateRangePicker
        range={range1}
        onRangeChange={setRange1}
        format="YYYY/MM/DD"
      />
      <DateRangePicker
        range={range2}
        onRangeChange={setRange2}
        format="YYYY-MM-DD"
      />
      <DateRangePicker
        range={range3}
        onRangeChange={setRange3}
        format="YYYY년 MM월 DD일"
      />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateRangePicker, DateRange } from '@aift/ui/DatePicker';export default function Format() {  const [range1, setRange1] = useState<DateRange>({    startDate: new Date(2025, 0, 11),    endDate: new Date(2025, 0, 18),  });  const [range2, setRange2] = useState<DateRange>({    startDate: new Date(2025, 0, 11),    endDate: new Date(2025, 0, 18),  });  const [range3, setRange3] = useState<DateRange>({    startDate: new Date(2025, 0, 11),    endDate: new Date(2025, 0, 18),  });  return (    <div className="max-w-md space-y-4">      <DateRangePicker        range={range1}        onRangeChange={setRange1}        format="YYYY/MM/DD"      />      <DateRangePicker        range={range2}        onRangeChange={setRange2}        format="YYYY-MM-DD"      />      <DateRangePicker        range={range3}        onRangeChange={setRange3}        format="YYYY년 MM월 DD일"      />    </div>  );}

Disabled

disabled 상태로 설정할 수 있습니다.

'use client';

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

export default function Disabled() {
  const [range, setRange] = useState<DateRange>({});

  return (
    <div className="max-w-md space-y-4">
      <DateRangePicker range={range} onRangeChange={setRange} />
      <DateRangePicker range={range} onRangeChange={setRange} disabled />
    </div>
  );
}

'use client';import { useState } from 'react';import { DateRangePicker, DateRange } from '@aift/ui/DatePicker';export default function Disabled() {  const [range, setRange] = useState<DateRange>({});  return (    <div className="max-w-md space-y-4">      <DateRangePicker range={range} onRangeChange={setRange} />      <DateRangePicker range={range} onRangeChange={setRange} disabled />    </div>  );}

Sizes

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

xsmall

small

medium

large

xlarge

'use client';

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

export default function Sizes() {
  const [rangeXsmall, setRangeXsmall] = useState<DateRange>({});
  const [rangeSmall, setRangeSmall] = useState<DateRange>({});
  const [rangeMedium, setRangeMedium] = useState<DateRange>({});
  const [rangeLarge, setRangeLarge] = useState<DateRange>({});
  const [rangeXlarge, setRangeXlarge] = useState<DateRange>({});

  return (
    <div className="max-w-md space-y-6">
      <div>
        <p className="text-sm text-neutral-60 mb-3">xsmall</p>
        <DateRangePicker
          size="xsmall"
          range={rangeXsmall}
          onRangeChange={setRangeXsmall}
          placeholder="시작일 ~ 종료일"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">small</p>
        <DateRangePicker
          size="small"
          range={rangeSmall}
          onRangeChange={setRangeSmall}
          placeholder="시작일 ~ 종료일"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">medium</p>
        <DateRangePicker
          size="medium"
          range={rangeMedium}
          onRangeChange={setRangeMedium}
          placeholder="시작일 ~ 종료일"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">large</p>
        <DateRangePicker
          size="large"
          range={rangeLarge}
          onRangeChange={setRangeLarge}
          placeholder="시작일 ~ 종료일"
        />
      </div>
      <div>
        <p className="text-sm text-neutral-60 mb-3">xlarge</p>
        <DateRangePicker
          size="xlarge"
          range={rangeXlarge}
          onRangeChange={setRangeXlarge}
          placeholder="시작일 ~ 종료일"
        />
      </div>
    </div>
  );
}

'use client';import { useState } from 'react';import { DateRangePicker, DateRange } from '@aift/ui/DatePicker';export default function Sizes() {  const [rangeXsmall, setRangeXsmall] = useState<DateRange>({});  const [rangeSmall, setRangeSmall] = useState<DateRange>({});  const [rangeMedium, setRangeMedium] = useState<DateRange>({});  const [rangeLarge, setRangeLarge] = useState<DateRange>({});  const [rangeXlarge, setRangeXlarge] = useState<DateRange>({});  return (    <div className="max-w-md space-y-6">      <div>        <p className="text-sm text-neutral-60 mb-3">xsmall</p>        <DateRangePicker          size="xsmall"          range={rangeXsmall}          onRangeChange={setRangeXsmall}          placeholder="시작일 ~ 종료일"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">small</p>        <DateRangePicker          size="small"          range={rangeSmall}          onRangeChange={setRangeSmall}          placeholder="시작일 ~ 종료일"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">medium</p>        <DateRangePicker          size="medium"          range={rangeMedium}          onRangeChange={setRangeMedium}          placeholder="시작일 ~ 종료일"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">large</p>        <DateRangePicker          size="large"          range={rangeLarge}          onRangeChange={setRangeLarge}          placeholder="시작일 ~ 종료일"        />      </div>      <div>        <p className="text-sm text-neutral-60 mb-3">xlarge</p>        <DateRangePicker          size="xlarge"          range={rangeXlarge}          onRangeChange={setRangeXlarge}          placeholder="시작일 ~ 종료일"        />      </div>    </div>  );}

Props

Prop	Type	Default	Description
range	`DateRange`	-	선택된 날짜 범위 (`{ startDate?: Date, endDate?: Date }`)
onRangeChange	`(range: DateRange) => void`	-	날짜 범위 변경 시 호출되는 콜백
placeholder	`string`	`'0000/00/00 ~ 0000/00/00'`	날짜가 선택되지 않았을 때 표시할 텍스트
format	`string`	`'YYYY/MM/DD'`	날짜 표시 형식 (dayjs 포맷)
disabled	`boolean`	`false`	비활성화 여부
className	`string`	-	추가 CSS 클래스
size	`'xsmall' \| 'small' \| 'medium' \| 'large' \| 'xlarge' \| 'extra'`	`'medium'`	트리거 버튼의 크기 (높이, 둥근 모서리)