DateRangeCalendar

Data Input

인라인 기간 선택 캘린더.

Usage

팝오버 없이 페이지 안에서 시작일과 종료일을 연속으로 선택할 때 사용한다.

import

import { DateRangeCalendar } from '@mildang/design-system/DateRangePicker';

예제를 복사해 쓸 때 필요한 준비

• @mildang/styled-system 은 이 저장소에서 Panda 가 생성하는 산출물이다. 저장소 안에서는 turbo run ship 이후 쓸 수 있고, 패키지 소비자는 자기 Panda 산출물이나 다른 레이아웃 수단으로 바꿔야 한다.

API Reference

DateRangeCalendar Props

Prop

Type

Default

autoFocus

boolean

false

className

string

지정 안 함

excludeUnavailable

boolean

false

getDayClassName

(date: Date) => string

지정 안 함

isDateUnavailable

(date: Date, firstSelectedDate?: Date) => boolean

지정 안 함

locale

string

지정 안 함

max

string

지정 안 함

ReactNode

지정 안 함

min

string

지정 안 함

numOfMonths

number

onValueChange

(value: DateRangeValue) => void

지정 안 함

startOfWeek

0 | 1 | 4 | 2 | 3 | 5 | 6

SystemStyleObject | SystemStyleObject[]

지정 안 함

timeZone

string

Asia/Seoul

value

DateRangeValue

지정 안 함

같은 패밀리

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

DateRangePicker

시작일과 종료일 기간을 캘린더 그리드로 선택하는 입력 컴포넌트.

예제

기본 사용

팝오버 없이 페이지에 그대로 놓는 인라인 기간 캘린더 — 확정 폭 부모가 필요합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>(undefined);
  return (
    <div style={{ display: 'inline-flex', flexDirection: 'column', gap: 12 }}>
      <DateRangeCalendar value={value} onValueChange={(v) => setValue(v ?? undefined)} />
      <div style={{ fontSize: 12, color: '#888' }}>
        선택된 값(ISO): {value ? `${value.start} ~ ${value.end}` : '없음'}
      </div>
    </div>
  );
}

초기값

초기 선택 범위가 있는 인라인 기간 캘린더입니다.

코드

Open in Playground

import { useState } from 'react';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarWithInitialValueExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>({
    start: '2026-06-15',
    end: '2026-06-29',
  });
  return <DateRangeCalendar value={value} onValueChange={(v) => setValue(v ?? undefined)} />;
}

최소·최대 날짜

min/max 범위 안에서만 기간을 선택합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarMinMaxExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>(undefined);
  return (
    <DateRangeCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      min="2026-06-01"
      max="2026-07-31"
    />
  );
}

선택 불가 날짜

주말을 선택 불가 날짜로 처리합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarUnavailableExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>(undefined);
  return (
    <DateRangeCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      isDateUnavailable={(date) => {
        const day = date.getDay();
        return day === 0 || day === 6;
      }}
    />
  );
}

선택 불가 날짜 제외

예약된 날짜를 가로지르는 범위 선택을 막습니다.

코드

Open in Playground

import { useState } from 'react';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarExcludeUnavailableExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>(undefined);
  const bookedDates = new Set(['2026-07-10', '2026-07-20', '2026-07-28']);
  return (
    <DateRangeCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      isDateUnavailable={(date) => {
        const y = date.getFullYear();
        const m = String(date.getMonth() + 1).padStart(2, '0');
        const d = String(date.getDate()).padStart(2, '0');
        return bookedDates.has(`${y}-${m}-${d}`);
      }}
      excludeUnavailable
    />
  );
}

날짜 셀 스타일

주말과 공휴일 날짜 셀에 커스텀 클래스를 적용합니다.

코드

Open in Playground

import { useState } from 'react';
import { css } from '@mildang/styled-system/css';
import { DateRangeCalendar, type DateRangeValue } from '@mildang/design-system/DateRangePicker';

export default function DateRangeCalendarCustomDayStyleExample() {
  const [value, setValue] = useState<DateRangeValue | undefined>(undefined);
  const holidays = ['2026-06-06', '2026-08-15']; // 현충일, 광복절 (예시)
  const sundayClass = css({ color: 'critical.fill.base' });
  const saturdayClass = css({ color: 'info.fill.base' });
  return (
    <DateRangeCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      getDayClassName={(date) => {
        const iso = date.toISOString().slice(0, 10);
        if (holidays.includes(iso)) return sundayClass;
        const day = date.getDay();
        if (day === 0) return sundayClass;
        if (day === 6) return saturdayClass;
        return undefined;
      }}
    />
  );
}