날짜 선택 (DatePicker)
날짜 선택은 단일 날짜·기간, 날짜+시간, 시간 전용 값을 고르게 해요. 원본 Figma의 single/multiple 변형과 날짜 상태를 따르며 v1.2.1의 공개 기능을 React와 Next.js 클라이언트 컴포넌트에서 지원해요.
Usage
import { DatePicker } from "podo-ui/react";import "podo-ui/styles.css";import "podo-ui/icons.css";
export default function Page() { return <DatePicker portal direction="auto" mode="instant" type="date" onChange={(value) => console.log(value)} />;}모드와 값 타입
instant는 하나의 값, period는 시작·종료 값을 선택해요. date, time, datetime, hour를 사용할 수 있어요.
~
:
:
~
지원 범위
React Native는 podo-ui/native의 View·Pressable 기반 단일 달력 UI로 date, period, datetime, time, hour와 빠른 기간 선택을 지원해요. Hono 호스트에서는 React client island의 DatePicker를 사용해요.
| React | Next.js | Hono | React Native |
|---|---|---|---|
| 전체 지원 | 전체 지원 (use client) | React island에서 지원 | Native UI 지원 |
주요 속성 (props)
| Prop | Type | Default | 설명 |
|---|---|---|---|
mode | "instant" | "period" | "instant" | 단일 또는 기간 선택 |
type | "date" | "time" | "datetime" | "hour" | "date" | 선택 값 종류 |
value / defaultValue | DatePickerValue | — | 제어형/비제어형 값 |
onChange | (value) => void | — | 값 확정 또는 초기화 콜백 |
minuteStep | 1 | 5 | 10 | 15 | 20 | 30 | 1 | 분 간격 |
hourFormat / hourStep | "12" | "24" / 1 | 2 | 3 | 4 | 6 | 12 | "24" / 1 | hour 타입 표시 방식과 간격 |
disabledHours | number[] | — | hour 타입에서 비활성화할 시각(0~23) |
disable / enable | DateCondition[] | — | 선택 가능 날짜 조건 |
minDate / maxDate | Date | DateTimeLimit | — | 날짜·시간 경계 |
yearRange | { min?: number; max?: number } | — | 연도 선택 범위 |
quickSelect | boolean | false | period 빠른 기간 선택과 이전·다음 기간 이동 |
portal / direction | boolean / "down" | "up" | "auto" | false / "auto" | body 포털 렌더링과 열림 방향 |
hideNavArrow | boolean | false | 빠른 기간 이전·다음 화살표 숨김 |
onReset | () => void | — | 초기화 클릭 알림; 초기화 후 팝업은 열린 상태 유지 |
v1 호환 동작
빠른 선택 프리셋은 v1.2.1 API(today, yesterday, thisWeek, lastWeek, last7Days, last30Days, thisMonth, lastMonth)를 유지해요. Figma 예시의 다음 주·다음 달·연도 문구는 공개 v1 API와 달라 시각 구조의 참고로만 사용해요.
| 영역 | 지원 기능 |
|---|---|
| 값 | controlled/uncontrolled, instant/period, reset/apply/cancel |
| 날짜 | disable, enable, min/max, initialCalendar, yearRange, format |
| 시간 | minuteStep, hourFormat, hourStep, disabledHours |
| 오버레이 | align, portal, direction, 외부 클릭 닫기, 모바일 단일 달력 |