Date Picker
설치 확인Calendar와 Popover를 조합한 날짜 선택
1. 목적과 출처
Calendar와 Popover를 조합한 날짜 선택
- 출처
- 기존 컴포넌트 조합
- 프로젝트
src/components/ui/date-picker.tsx- Registry
@adcapsule/date-picker
2. 프리뷰와 변형
오른쪽 위에서 색 모드를 바꾸면 라이트·다크를 비교할 수 있습니다.
| 상태 | 모양 |
|---|---|
| 고르기 전 | |
| 고른 뒤 | |
| 입력 폼 안 | |
| 비활성 disabled |
3. 속성 바꿔 보기
값: 없음
size
4. 설치와 사용
- npm 패키지
- lucide-react, react-day-picker
- 함께 설치
- @adcapsule/button, @adcapsule/calendar, @adcapsule/popover, @adcapsule/utils
처음 쓰는 프로젝트는 @adcapsule/theme를 먼저 설치합니다. Registry 연결
5. 바꿔도 되는 것과 유지할 토큰
제품에서 바꿔도 되는 것
- value·onValueChange 또는 defaultValue
- disabledDates로 고를 수 없는 날짜
- placeholder
- size: sm·default
공통으로 유지할 토큰
- Button outline과 같음
- Calendar와 같음
- radius.lg (펼친 창 10px)