Design Docs

DatePicker날짜를 선택할 수 있는 스크롤 기반 데이트피커 컴포넌트입니다. 독립 컴포넌트와 모달 버전을 제공합니다.

Examples

DatePicker (Inline)페이지에 직접 삽입되는 데이트피커

선택된 날짜: 2026년 2월 7일DatePicker는 스크롤 기반 월별 캘린더를 제공합니다

DatePickerModal모달 형태의 데이트피커 - 버튼을 클릭하여 열 수 있습니다

현재 선택된 날짜: 2026년 2월 7일모달은 바텀시트 형태로 열리며, 스크롤하여 원하는 날짜를 선택할 수 있습니다

Props

Name	Type	Default	Required	Description
selectedDate	string		-	선택된 날짜 (dayjs 객체)
onChange	string		Yes	날짜 변경 시 호출되는 콜백 함수
minDate	string	dayjs()	-	선택 가능한 최소 날짜 (dayjs 객체)
maxDate	string	dayjs().add(6, 'month').endOf('month')	-	선택 가능한 최대 날짜 (dayjs 객체)
name	string		-	form input name 속성

Design Docs

DatePicker날짜를 선택할 수 있는 스크롤 기반 데이트피커 컴포넌트입니다. 독립 컴포넌트와 모달 버전을 제공합니다.

Examples

DatePicker (Inline)페이지에 직접 삽입되는 데이트피커

선택된 날짜: 2026년 2월 7일DatePicker는 스크롤 기반 월별 캘린더를 제공합니다

DatePickerModal모달 형태의 데이트피커 - 버튼을 클릭하여 열 수 있습니다

현재 선택된 날짜: 2026년 2월 7일모달은 바텀시트 형태로 열리며, 스크롤하여 원하는 날짜를 선택할 수 있습니다

Props

Name	Type	Default	Required	Description
selectedDate	string		-	선택된 날짜 (dayjs 객체)
onChange	string		Yes	날짜 변경 시 호출되는 콜백 함수
minDate	string	dayjs()	-	선택 가능한 최소 날짜 (dayjs 객체)
maxDate	string	dayjs().add(6, 'month').endOf('month')	-	선택 가능한 최대 날짜 (dayjs 객체)
name	string		-	form input name 속성