📅

@lani.ground/react-picker

React Component Library

Production Ready

TypeScript

🎯

Preview

Props 정의

Name	Type	Required	Description
date	Date \| null	Required	선택된 날짜
onChange	(date: Date) => void	Required	날짜 변경 시 호출되는 콜백
isOpen	boolean	Required	달력 열림/닫힘 상태
onOpenChange	(isOpen: boolean) => void	Required	달력 열림/닫힘 상태 변경 콜백
calendarType	'default' \| 'multiple' \| 'scroll'	Optional	달력 표시 형태 (기본값: 'default')
minDate	Date	Optional	선택 가능한 최소 날짜
maxDate	Date	Optional	선택 가능한 최대 날짜
weekDays	string[]	Optional	요일 표시 형태 (기본값: ['일', '월', '화', '수', '목', '금', '토'])
weekendColor	string	Optional	주말 날짜 색상
holidayColor	string	Optional	휴일 날짜 색상
holidays	Date[]	Optional	휴일 날짜 목록
disabled	boolean	Optional	비활성화 여부 (기본값: false)
autoClose	boolean	Optional	날짜 선택 시 자동으로 달력을 닫을지 여부 (기본값: false)
className	string	Optional	추가 CSS 클래스명

Usage

1import { dateKit } from '@lani.ground/kits';
2import { DatePicker } from '@lani.ground/react-picker';
3import '@lani.ground/react-picker/styles/DatePicker.css';
4
5
6const { formatDate } = dateKit;
7const [basicDate, setBasicDate] = useState<Date | null>(null);
8const [basicDateOpen, setBasicDateOpen] = useState(false);
9
10<div>
11  <span>선택된 날짜:</span>
12  <button onClick={() => setBasicDateOpen(true)}>
13    {formatDate(basicDate, 'YYYY년 MM월 DD일 (ddd)') || '날짜를 선택해주세요'}
14  </button>
15</div>
16
17<DatePicker
18  date={basicDate}
19  calendarType="default"
20  onChange={setBasicDate}
21  isOpen={basicDateOpen}
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={(open) => setBasicDateOpen}
31/>

🎯

DatePicker Examples

📅

DatePicker - Default

기본적인 단일 달력 형태의 날짜 선택기입니다. 간단하고 직관적인 UI를 제공합니다.

선택된 날짜:

주요 기능

휴일 및 주말 색상 커스터마이징

📊

DatePicker - Multiple

여러 달을 동시에 표시하는 달력입니다. 넓은 범위의 날짜를 한눈에 볼 수 있습니다.

선택된 날짜:

주요 기능

휴일 및 주말 색상 커스터마이징

📜

DatePicker - Scroll

스크롤 형태의 달력으로, 연속적인 월 탐색이 가능합니다. 모바일에서 특히 유용합니다.

선택된 날짜:

주요 기능

휴일 및 주말 색상 커스터마이징