DateCalendar

Data Input

인라인 일자 선택 캘린더.

Usage

팝오버 없이 페이지 안에서 한 날짜를 달력 그리드로 직접 선택할 때 사용한다.

import

import { DateCalendar } from '@mildang/design-system/DatePicker';

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

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

API Reference

DateCalendar Props

Prop

Type

Default

autoFocus

boolean

false

className

string

지정 안 함

getDayClassName

(date: Date) => string

지정 안 함

isDateUnavailable

(date: Date) => boolean

지정 안 함

locale

string

지정 안 함

max

string

지정 안 함

min

string

지정 안 함

monthLabelFormat

(date: Date) => string

지정 안 함

onValueChange

(value: string) => void

지정 안 함

startOfWeek

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

SystemStyleObject | SystemStyleObject[]

지정 안 함

timeZone

string

Asia/Seoul

value

string

지정 안 함

weekdayFormat

"narrow" | "short" | "short-uppercase" | "long"

short

같은 패밀리

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

DatePicker

단일 일자를 캘린더에서 고르는 날짜 입력.

예제

기본 사용

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

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';

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

초기값

초기 선택값이 있는 인라인 캘린더입니다.

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';

export default function DateCalendarWithInitialValueExample() {
  const [value, setValue] = useState<string | undefined>('2026-06-29');
  return <DateCalendar value={value} onValueChange={(v) => setValue(v ?? undefined)} />;
}

최소·최대 날짜

min/max 범위 안에서만 날짜를 선택합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';

export default function DateCalendarMinMaxExample() {
  const [value, setValue] = useState<string | undefined>(undefined);
  return (
    <DateCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      min="2026-06-01"
      max="2026-06-30"
    />
  );
}

선택 불가 날짜

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

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';

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

월·연도 포맷

useDateTimeFormatter로 달력 헤더의 월·연도 표기를 바꿉니다.

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';
import { useDateTimeFormatter } from '@mildang/design-system/Format';

export default function DateCalendarCustomMonthYearFormatExample() {
  const [value, setValue] = useState<string | undefined>(undefined);
  const formatYearMonth = useDateTimeFormatter({ type: 'yearMonth' });
  return (
    <DateCalendar
      value={value}
      onValueChange={(v) => setValue(v ?? undefined)}
      monthLabelFormat={formatYearMonth}
    />
  );
}

월만 표시하는 포맷

월만 표시하는 두 가지 포맷을 비교합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';
import { useDateTimeFormatter } from '@mildang/design-system/Format';

export default function DateCalendarCustomMonthOnlyFormatExample() {
  const [valueA, setValueA] = useState<string | undefined>(undefined);
  const [valueB, setValueB] = useState<string | undefined>(undefined);
  const formatMonth = useDateTimeFormatter({ options: { month: 'long' } });
  const formatMonth2Digit = useDateTimeFormatter({ options: { month: '2-digit' } });
  return (
    <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>
          {"month: 'long' — ko \"7월\" / en \"July\""}
        </div>
        <DateCalendar
          value={valueA}
          onValueChange={(v) => setValueA(v ?? undefined)}
          monthLabelFormat={formatMonth}
        />
      </div>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>
          {"month: '2-digit' — ko \"07월\" / en \"07\""}
        </div>
        <DateCalendar
          value={valueB}
          onValueChange={(v) => setValueB(v ?? undefined)}
          monthLabelFormat={formatMonth2Digit}
        />
      </div>
    </div>
  );
}

요일 포맷

요일 헤더의 표시 형식을 비교합니다.

코드

Open in Playground

import { useState } from 'react';
import { DateCalendar } from '@mildang/design-system/DatePicker';

export default function DateCalendarWeekdayFormatExample() {
  const [valueA, setValueA] = useState<string | undefined>(undefined);
  const [valueB, setValueB] = useState<string | undefined>(undefined);
  const [valueC, setValueC] = useState<string | undefined>(undefined);
  const [valueD, setValueD] = useState<string | undefined>(undefined);
  return (
    <div style={{ display: 'flex', gap: 24, flexWrap: 'wrap' }}>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>narrow</div>
        <DateCalendar value={valueA} onValueChange={(v) => setValueA(v ?? undefined)} weekdayFormat="narrow" />
      </div>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>short (default)</div>
        <DateCalendar value={valueB} onValueChange={(v) => setValueB(v ?? undefined)} />
      </div>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>short-uppercase</div>
        <DateCalendar
          value={valueC}
          onValueChange={(v) => setValueC(v ?? undefined)}
          weekdayFormat="short-uppercase"
        />
      </div>
      <div>
        <div style={{ fontSize: 12, color: '#888', marginBottom: 8 }}>long</div>
        <DateCalendar value={valueD} onValueChange={(v) => setValueD(v ?? undefined)} weekdayFormat="long" />
      </div>
    </div>
  );
}

날짜 셀 스타일

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

코드

Open in Playground

import { useState } from 'react';
import { css } from '@mildang/styled-system/css';
import { DateCalendar } from '@mildang/design-system/DatePicker';

export default function DateCalendarCustomDayStyleExample() {
  const [value, setValue] = useState<string | 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 (
    <DateCalendar
      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;
      }}
    />
  );
}