DateRangePicker

core

날짜 범위 선택 컴포넌트. 프리셋, 달력 UI, 포커스 관리를 지원합니다.

깊이

100%

Date Range

2026년 2월 4일

생성된 테스트 결과를 찾지 못했습니다.

DateRangePicker 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Prop	타입	기본값	설명
`value`	`DateRange`	—	제어 모드: { start: Date \| null, end: Date \| null }
`onChange`	`(range: DateRange) => void`	—	범위 변경 핸들러
`presets`	`DateRangePreset[]`	—	빠른 선택 프리셋 배열 (기본: Today, Last 7/30/90 days)
`placeholder`	`string`	`"Select date range"`	미선택 시 표시 텍스트
`label`	`string`	—	입력 필드 레이블
`disabled`	`boolean`	`false`	비활성화 상태
`format`	`(date: Date) => string`	—	날짜 포맷 함수
`comparison`	`boolean`	`false`	비교 모드 활성화
`comparisonMode`	`"previous" \| "year-over-year"`	`"previous"`	비교 기준 (이전 기간 / 전년 동기)
`onComparisonChange`	`(comparison: boolean, mode: ComparisonMode) => void`	—	비교 모드 변경 콜백
`showGranularity`	`boolean`	`false`	시간 단위 선택기 표시
`granularity`	`"hour" \| "day" \| "week" \| "month"`	`"day"`	시간 단위
`onGranularityChange`	`(granularity: DateGranularity) => void`	—	시간 단위 변경 콜백

tsx

import { DateRangePicker } from "@reopt-ai/opt-ui";