Date Pickers
날짜 또는 기간을 선택하는 컴포넌트입니다. 단일 날짜 선택과 기간(시작/종료) 선택 두 가지 형태를 제공합니다.
Figma 컴포넌트: Date pickers
Single date
하나의 날짜를 선택하는 캘린더입니다. 입력 필드 + Today 버튼 + 캘린더 그리드 + Cancel / Apply 푸터로 구성됩니다.
Dual dates
기간을 선택하는 캘린더입니다. 좌측 프리셋 사이드바, 두 달치 캘린더, 시작일 / 종료일 입력으로 구성됩니다.
Trigger (input)
캘린더를 여는 트리거 입력 필드입니다. 클릭하면 드롭다운으로 캘린더가 펼쳐집니다.
Calendar cell variants
캘린더 셀의 상태별 표현입니다.
Props
<DatePicker /> (트리거 + 드롭다운)
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'dual' | 'single' | 단일 날짜 / 기간 선택 |
placeholder | string | 'Select dates' | 값이 없을 때 표시할 문구 |
value | string | - | 선택된 값 표시용 텍스트 |
defaultOpen | boolean | false | 초기 열림 상태 |
<DatePickerMenu /> (always-open 캘린더)
| Prop | Type | Default | Description |
|---|---|---|---|
type | 'single' | 'dual' | 'single' | 단일 / 기간 형태 |
initialMonth | Date | Jan 2025 | 초기 표시할 월 |
initialDate | Date | Jan 10, 2025 | (single) 초기 선택 날짜 |
initialRange | [Date, Date] | [Jan 10, Jan 16] | (dual) 초기 기간 |
selectedPreset | string | 'Last week' | (dual) 초기 선택된 프리셋 |
today | Date | Jan 1, 2025 | 오늘 날짜 (today indicator 위치 결정) |
dotDates | Date[] | [] | 하단 점 indicator 표시할 날짜 |
Figma Variants
Date picker menu
| Property | Values |
|---|---|
| Type | Single date Dual dates |
| Breakpoint | Desktop Mobile |
Date picker dropdown (input trigger)
| Property | Values |
|---|---|
| Opened | True False |
| Type | Single date Dual dates |
| State | Placeholder Active |
| Breakpoint | Desktop Mobile |
Calendar cell
| Property | Values |
|---|---|
| Type | Default Today's date Selected Active |
| State | Default Hover Disabled |
Date picker list item (preset)
| Property | Values |
|---|---|
| Selected | True False |
| State | Default Hover Focused |