ZARITALK DESIGN DOCS
Tokens
Colors
Type Scale
Components
Button
Input
Typography
Alert
Badge
Tag
Tab
CheckBox
Toggle
Rating
Modal
BottomSheet
Divider
LoadingSpinner
Skeleton
Radio
TextArea
DropDown
Tooltip
SplitRating
Slider
AutoHeightTextArea
Avatar
HighlightTypography
RedDot
HR
VR
Overlay
Loading
Popup
Menu
AlertWithConfirmButton
MultiCheckBox
TabBottomBorder
Calendar
DatePicker
TimePicker
WeekPicker
DayPicker
InfiniteScroll
PullToRefresh
RevealAnimation
SignaturePad
ImagePreview
Variants
Design Docs
TimePicker시간을 선택할 수 있는 스크롤 기반 타임피커 컴포넌트입니다. 오전/오후, 시, 분을 선택할 수 있습니다.
Examples
TimePicker (Inline)페이지에 직접 삽입되는 타임피커
선택된 시간: 오후 12:29TimePicker는 오전/오후, 시, 분을 스크롤로 선택합니다
TimePickerModal모달 형태의 타임피커 - 버튼을 클릭하여 열 수 있습니다
현재 선택된 시간: 오후 12:29모달은 바텀시트 형태로 열리며, minuteInterval로 분 단위 간격을 설정할 수 있습니다
Custom Interval5분 간격이 아닌 15분 간격으로 설정
minuteInterval={15}를 설정하면 00, 15, 30, 45분만 선택 가능합니다
Props
NameTypeDefaultRequiredDescription
initValuestringdayjs()-초기 시간 값 (dayjs 객체)
onChangestring-시간 변경 시 호출되는 콜백 함수
namestring-form input name 속성
minuteIntervalnumber5-분 단위 간격 (예: 5 → 00, 05, 10, ...)