📅

@lani.ground/react-picker

React Component Library

Production Ready

TypeScript

🎯

Preview

Props 정의

Name	Type	Required	Description
value	Date \| null	Required	선택된 날짜와 시간
onChange	(date: Date \| null) => void	Required	날짜/시간 변경 시 호출되는 콜백
isOpen	boolean	Required	날짜/시간 선택기 열림/닫힘 상태
onOpenChange	(open: boolean) => void	Required	열림/닫힘 상태 변경 콜백
calendarType	'scroll' \| 'default'	Optional	달력 표시 형태 (기본값: 'default')
ampm	boolean	Optional	AM/PM 형식 사용 여부 (기본값: false)
minuteStep	1 \| 5 \| 10 \| 15 \| 30	Optional	분 단위 스텝 (기본값: 1)
secondStep	1 \| 5 \| 10 \| 15 \| 30	Optional	초 단위 스텝 (기본값: 1)
minDate	Date	Optional	선택 가능한 최소 날짜
maxDate	Date	Optional	선택 가능한 최대 날짜
weekendColor	string	Optional	주말 날짜 색상
holidayColor	string	Optional	휴일 날짜 색상
holidays	Date[]	Optional	휴일 날짜 목록
className	string	Optional	추가 CSS 클래스명

Usage

1import { dateKit } from '@lani.ground/kits';
2import { DateTimePicker } from '@lani.ground/react-picker';
3import '@lani.ground/react-picker/styles/DateTimePicker.css';
4
5
6const { formatDate } = dateKit;
7const [basicDateTime, setBasicDateTime] = useState<Date | null>(null);
8const [basicDateTimeOpen, setBasicDateTimeOpen] = useState(false);
9
10<div>
11  <span>선택된 날짜/시간:</span>
12  <button onClick={() => setBasicDateTimeOpen(true)}>
13    {formatDate(basicDateTime, 'YYYY년 MM월 DD일 HH:mm:ss') || "날짜와 시간을 선택해주세요"}
14  </button>
15</div>
16
17<DateTimePicker
18  calendarType="scroll"
19  value={basicDateTime}
20  onChange={setBasicDateTime}
21  isOpen={basicDateTimeOpen}
22  holidays={[
23    new Date('2025-01-01'), // 신정
24    new Date('2025-02-09'), // 설날
25    new Date('2025-03-01'), // 삼일절
26    new Date('2025-05-05'), // 어린이날
27  ]}
28  weekendColor="#6B8EFF"
29  holidayColor="#FF8B8B"
30  onOpenChange={setBasicDateTimeOpen}
31  ampm
32/>

🎯

DateTimePicker Examples

🕐

DateTimePicker - Default

날짜와 시간을 함께 선택할 수 있는 통합 선택기입니다. 스크롤 달력과 시간 선택기가 결합된 형태로 제공됩니다.

선택된 날짜/시간:

주요 기능

날짜와 시간 동시 선택
스크롤 형태의 달력 UI
AM/PM 12시간 형식 지원
휴일 및 주말 색상 커스터마이징
반응형 디자인 지원