# FilterDate

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FCbIore3FmkNY3IIod23v%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%2010.01.33.png?alt=media&#x26;token=17af6081-b308-440d-8ebe-2015392b7b5a" 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>label</td><td>string</td><td>-</td><td>라벨 텍스트</td></tr><tr><td>size</td><td>'medium' | 'small'</td><td>'medium'</td><td>사이즈</td></tr><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>onApply</td><td>function</td><td>-</td><td>적용 버튼 클릭 핸들러</td></tr><tr><td>onReset</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>description</td><td>string</td><td>-</td><td>description 텍스트</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></tbody></table>



### Usage

```typescript
<FilterDate
  label={'단일 선택'}
  mode={'single'}
  size={'medium'}
  name={'singleDate'}
  value={'2024. 3. 16'}
  onChange={() => {}}
  description={'시작일과 종료일을 선택해주세요'}
/>

<FilterDate
  label={'기간 선택'}
  mode={'range'}
  size={'small'}
  fromName={'startDate'}
  toName={'endDate'}
  fromValue={'2024. 3. 16'}
  toValue={'2024. 3. 19'}
  onChange={() => {}}
  description={'시작일과 종료일을 선택해주세요'}
  showPresets={true}
/>
```
