DatePicker

react-day-picker 라이브러리 사용

Props

Prop	Type	Default	Description
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	-	날짜 변경 핸들러
onTabChange	function	-	모드 선택 이벤트 핸들러
todayTextColor	string	-	오늘 날짜 텍스트 컬러
selectedBgColor	string	-	선택한 날짜 배경 컬러
rangeBetweenBgColor	string	-	범위 선택 시 배경 컬러
singleHelperText	string	-	단일 모드 용 헬퍼 텍스트
rangeHelperText	string	-	범위 모드 용 헬퍼 텍스트
helperText	string	-	공통 헬퍼 텍스트
showPresets	boolean	-	프리셋 영역 노출 여부
presetList	{ key: string value: string }[]	-	프리셋 리스트 key: 프리셋 아이템 고유 키 값 value: 선택 값
showActionBar	boolean	-	액션 바 노출 여부
onSingleApply	function	-	단일 모드 적용 버튼 클릭 핸들러
onSingleReset	function	-	단일 모드 초기화 버튼 클릭 핸들러
onRangeApply	function	-	범위 모드 적용 버튼 클릭 핸들러
onRangeReset	function	-	범위 모드 초기화 버튼 클릭 핸들러

Usage

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