FilterDate

Props

Prop	Type	Default	Description
label	string	-	라벨 텍스트
size	'medium' | 'small'	'medium'	사이즈
mode	'single' | 'range' | 'both'	'both'	datepicker 모드
defaultTab	'single' | 'range'	-	기본 선택 모드
name	string	-	데이트피커 고유 이름
value	string	-	선택한 날짜 (yyyy. M. d 형식)
fromName	string	-	시작일자 고유 이름
toName	string	-	종료일자 고유 이름
fromValue	string	-	시작일자 선택 값
toValue	string	-	종료일자 선택 값
onChange	function	-	날짜 변경 핸들러
onApply	function	-	적용 버튼 클릭 핸들러
onReset	function	-	초기화 버튼 클릭 핸들러
todayTextColor	string	-	오늘 날짜 텍스트 컬러
selectedBgColor	string	-	선택한 날짜 배경 컬러
rangeBetweenBgColor	string	-	범위 선택 시 배경 컬러
description	string	-	description 텍스트
showPresets	boolean	-	프리셋 영역 노출 여부
presetList	{ key: string value: string }[]	-	프리셋 리스트 key: 프리셋 아이템 고유 키 값 value: 선택 값

Usage

<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}
/>