📅

@lani.ground/react-picker

React Component Library

Production Ready

TypeScript

🎯

Preview

Props 정의

Name	Type	Required	Description
range	[Date \| null, Date \| null]	Required	선택된 날짜 범위 [시작일, 종료일]
onChange	(range: [Date \| null, Date \| null]) => void	Required	범위 변경 시 호출되는 콜백
isOpen	boolean	Required	달력 열림/닫힘 상태
onOpenChange	(isOpen: boolean) => void	Required	달력 열림/닫힘 상태 변경 콜백
calendarType	'default' \| 'multiple' \| 'scroll'	Optional	달력 표시 형태 (기본값: 'default')
activeInput	'start' \| 'end' \| null	Optional	현재 활성화된 입력 필드
onActiveInputChange	(activeInput: 'start' \| 'end' \| null) => void	Optional	활성 입력 필드 변경 콜백
quickSelectOptions	{ label: string; days: number }[]	Optional	빠른 선택 옵션 목록
enableReset	boolean	Optional	범위 초기화 버튼 표시 여부
minDate	Date	Optional	선택 가능한 최소 날짜
maxDate	Date	Optional	선택 가능한 최대 날짜
weekDays	string[]	Optional	요일 표시 형태 (기본값: ['일', '월', '화', '수', '목', '금', '토'])
weekendColor	string	Optional	주말 날짜 색상
holidayColor	string	Optional	휴일 날짜 색상
holidays	Date[]	Optional	휴일 날짜 목록
autoClose	boolean	Optional	날짜 선택 시 자동으로 달력을 닫을지 여부 (기본값: false)
className	string	Optional	추가 CSS 클래스명

Usage

1import { dateKit } from '@lani.ground/kits';
2import { RangePicker } from '@lani.ground/react-picker';
3import '@lani.ground/react-picker/styles/RangePicker.css';
4
5
6const { formatDate } = dateKit;
7const [quickSelectRange, setQuickSelectRange] = useState<[Date | null, Date | null]>([null, null]);
8const [quickSelectRangeOpen, setQuickSelectRangeOpen] = useState(false);
9const [quickSelectRangeActiveInput, setQuickSelectRangeActiveInput] = useState<'start' | 'end' | null>(null);
10
11<div>
12  <span>선택된 기간:</span>
13  <div>
14    <button
15      onClick={() => {
16        setQuickSelectRangeOpen(true);
17        setQuickSelectRangeActiveInput('start');
18      }}
19      className={quickSelectRangeActiveInput === 'start' ? 'active' : ''}
20    >
21      {formatDate(quickSelectRange[0], 'YYYY.MM.DD') || '시작일'}
22    </button>
23    <span>
24      ~
25    </span>
26    <button
27      onClick={() => {
28        setQuickSelectRangeOpen(true);
29        setQuickSelectRangeActiveInput('end');
30      }}
31      className={quickSelectRangeActiveInput === 'end' ? 'active' : ''}
32    >
33      {formatDate(quickSelectRange[1], 'YYYY.MM.DD') || '종료일'}
34    </button>
35  </div>
36</div>
37
38<RangePicker
39  calendarType="default"
40  range={quickSelectRange}
41  onChange={setQuickSelectRange}
42  isOpen={quickSelectRangeOpen}
43  onOpenChange={setQuickSelectRangeOpen}
44  activeInput={quickSelectRangeActiveInput}
45  onActiveInputChange={setQuickSelectRangeActiveInput}
46  weekendColor="#6B8EFF"
47  holidayColor="#FF8B8B"
48  quickSelectOptions={[
49    { label: '7일', days: 7 },
50    { label: '14일', days: 14 },
51    { label: '28일', days: 28 },
52    { label: '3개월', days: 90 },
53  ]}
54  holidays={[
55    new Date('2025-01-01'), // 신정
56    new Date('2025-02-09'), // 설날
57    new Date('2025-03-01'), // 삼일절
58    new Date('2025-05-05'), // 어린이날
59  ]}
60  enableReset
61/>

🎯

RangePicker Examples

📊

RangePicker - Default

빠른 선택 옵션이 포함된 기본 범위 선택기입니다. 미리 정의된 기간을 쉽게 선택할 수 있습니다.

선택된 기간:

주요 기능

빠른 선택 옵션 (7일, 14일, 28일, 3개월)
시작일/종료일 독립적 선택
휴일 및 주말 색상 커스터마이징
반응형 디자인 지원

📅

RangePicker - Multiple

여러 달을 동시에 표시하는 범위 선택기입니다. 넓은 범위의 기간을 한눈에 보고 선택할 수 있습니다.

선택된 기간:

주요 기능

시작일/종료일 독립적 선택
휴일 및 주말 색상 커스터마이징
반응형 디자인 지원

📜

RangePicker - Scroll

스크롤 형태의 범위 선택기로, 연속적인 월 탐색이 가능합니다. 모바일에서 특히 유용한 UI입니다.

선택된 기간:

주요 기능

시작일/종료일 독립적 선택
휴일 및 주말 색상 커스터마이징
반응형 디자인 지원