Import

import { DatePicker } from 'podo-ui';

Props

기본 사용법

DatePicker는 날짜, 시간, 또는 날짜+시간을 선택할 수 있는 컴포넌트입니다. 단일 선택(instant)과 기간 선택(period) 모드를 지원합니다.

import { DatePicker } from 'podo-ui';

// Single date select
<DatePicker
  mode="instant"
  type="date"
  value={value}
  onChange={setValue}
/>

// Period select
<DatePicker
  mode="period"
  type="date"
  value={value}
  onChange={setValue}
/>

타입

세 가지 타입을 지원합니다: date(날짜만), time(시간만), datetime(날짜+시간)

기간 선택

mode="period"로 설정하면 시작일과 종료일을 선택할 수 있습니다. 하단에 초기화/적용 버튼이 표시됩니다.

상태

다양한 상태를 지원합니다:

날짜 비활성화

disable과 enable props를 사용하여 선택 가능한 날짜를 제한할 수 있습니다. 특정 날짜, 날짜 범위, 또는 함수를 통해 조건을 지정할 수 있습니다.

최소/최대 날짜

minDate와 maxDate props를 사용하여 선택 가능한 날짜 범위를 지정할 수 있습니다. Date 객체 또는 DateTimeLimit 형태로 시간까지 지정할 수 있습니다.

년도 범위 설정

yearRange props를 사용하여 년도 선택 범위를 지정할 수 있습니다. minDate/maxDate가 있으면 자동으로 년도를 추출하며, yearRange가 명시적으로 지정되면 우선 적용됩니다.

// yearRange만 사용 (명시적 지정)
<DatePicker
  yearRange={{ min: 2020, max: 2030 }}
/>

// minDate/maxDate만 사용 (년도 자동 추출)
<DatePicker
  minDate={new Date(2022, 0, 1)}
  maxDate={new Date(2025, 11, 31)}
/>

// 둘 다 사용 (yearRange 우선, 날짜 비활성화는 minDate/maxDate 적용)
<DatePicker
  yearRange={{ min: 2020, max: 2030 }}
  minDate={new Date(2022, 0, 1)}
/>

분 단위 선택

minuteStep props를 사용하여 분 선택 간격을 지정할 수 있습니다. 1, 5, 10, 15, 30분 단위를 지원하며 기본값은 1분입니다.

날짜 포맷

format props를 사용하여 날짜/시간 표시 형식을 지정할 수 있습니다. y(년), m(월), d(일), h(시), i(분)을 조합하여 원하는 포맷을 만들 수 있습니다.

초기 달력 월 설정

기간 선택 모드에서 initialCalendar props를 사용하여 왼쪽/오른쪽 달력의 초기 표시 월을 설정할 수 있습니다. 'now'(현재 달), 'prevMonth'(이전 달), 'nextMonth'(다음 달) 또는 Date 객체를 사용할 수 있습니다.

Value 인터페이스

DatePickerValue는 날짜와 시간을 별도의 필드로 관리합니다. 이를 통해 날짜와 시간을 독립적으로 바인딩하고 제어할 수 있습니다.

interface TimeValue {
  hour: number;   // 0-23
  minute: number; // 0-59
}

interface DatePickerValue {
  date?: Date;        // Start date
  time?: TimeValue;   // Start time
  endDate?: Date;     // End date (period mode)
  endTime?: TimeValue; // End time (period mode)
}