# DatePicker

[react-day-picker](https://daypicker.dev/) 라이브러리 사용

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FuSBtMRas4vuLIhjouEZ3%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-04%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%209.45.30.png?alt=media&#x26;token=bf143c49-639b-49dd-880c-23956a618f0d" alt=""><figcaption></figcaption></figure>

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>mode</td><td>'single' | 'range' | 'both'</td><td>'both'</td><td>datepicker 모드</td></tr><tr><td>defaultTab</td><td>'single' | 'range'</td><td>-</td><td>기본 선택 모드</td></tr><tr><td>name</td><td>string</td><td>-</td><td>데이트피커 고유 이름</td></tr><tr><td>value</td><td>string</td><td>-</td><td>선택한 날짜 (yyyy. M. d 형식)</td></tr><tr><td>fromName</td><td>string</td><td>-</td><td>시작일자 고유 이름</td></tr><tr><td>toName</td><td>string</td><td>-</td><td>종료일자 고유 이름</td></tr><tr><td>fromValue</td><td>string</td><td>-</td><td>시작일자 선택 값</td></tr><tr><td>toValue</td><td>string</td><td>-</td><td>종료일자 선택 값</td></tr><tr><td>onChange</td><td>function</td><td>-</td><td>날짜 변경 핸들러</td></tr><tr><td>onTabChange</td><td>function</td><td>-</td><td>모드 선택 이벤트 핸들러</td></tr><tr><td>todayTextColor</td><td>string</td><td>-</td><td>오늘 날짜 텍스트 컬러</td></tr><tr><td>selectedBgColor</td><td>string</td><td>-</td><td>선택한 날짜 배경 컬러</td></tr><tr><td>rangeBetweenBgColor</td><td>string</td><td>-</td><td>범위 선택 시 배경 컬러</td></tr><tr><td>singleHelperText</td><td>string</td><td>-</td><td>단일 모드 용 헬퍼 텍스트</td></tr><tr><td>rangeHelperText</td><td>string</td><td>-</td><td>범위 모드 용 헬퍼 텍스트</td></tr><tr><td>helperText</td><td>string</td><td>-</td><td>공통 헬퍼 텍스트</td></tr><tr><td>showPresets</td><td>boolean</td><td>-</td><td>프리셋 영역 노출 여부</td></tr><tr><td>presetList</td><td>{<br>  key: string<br>  value: string<br>}[]</td><td>-</td><td>프리셋 리스트<br>key: 프리셋 아이템 고유 키 값<br>value: 선택 값</td></tr><tr><td>showActionBar</td><td>boolean</td><td>-</td><td>액션 바 노출 여부</td></tr><tr><td>onSingleApply</td><td>function</td><td>-</td><td>단일 모드 적용 버튼 클릭 핸들러</td></tr><tr><td>onSingleReset</td><td>function</td><td>-</td><td>단일 모드 초기화 버튼 클릭 핸들러</td></tr><tr><td>onRangeApply</td><td>function</td><td>-</td><td>범위 모드 적용 버튼 클릭 핸들러</td></tr><tr><td>onRangeReset</td><td>function</td><td>-</td><td>범위 모드 초기화 버튼 클릭 핸들러</td></tr></tbody></table>



### Usage

```typescript
<DatePicker
  mode={'single'}
  fromName={'birthDate'}
  onChange={() => {}}
  value={'2025. 2. 26'}
/>

<DatePicker
  mode={'ranege'}
  fromName={'startDate'}
  toName={'endDate'}
  fromValue={'2024. 3. 16'}
  toValue={'2024. 3. 19'}
  onChange={() => {}}
  helperText={'시작일과 종료일을 선택해주세요'}
  showPresets={true}
/>
```
