📅

@lani.ground/react-picker

React Component Library

NPM Version
Production Ready
TypeScript
🎯

Preview

Props 정의

NameTypeRequiredDescription
valueDate | string | nullRequired선택된 시간 (Date 객체 또는 문자열)
onChange(value: Date | string | null) => voidRequired시간 변경 시 호출되는 콜백
isOpenbooleanRequired시간 선택기 열림/닫힘 상태
onOpenChange(isOpen: boolean) => voidRequired열림/닫힘 상태 변경 콜백
mode'default' | 'panel'OptionalUI 모드 (기본값: 'default')
timeUnits('hour' | 'minute' | 'second' | 'ampm')[]Optional표시할 시간 단위 (기본값: ['hour', 'minute', 'second'])
enableSnapbooleanOptional스냅 기능 활성화 (기본값: false)
minuteStep1 | 5 | 10 | 15 | 30Optional분 단위 스텝 (기본값: 1)
secondStep1 | 5 | 10 | 15 | 30Optional초 단위 스텝 (기본값: 1)
disabledbooleanOptional비활성화 여부 (기본값: false)
classNamestringOptional추가 CSS 클래스명

Usage

1import { dateKit } from '@lani.ground/kits';
2import { TimePicker } from '@lani.ground/react-picker';
3import '@lani.ground/react-picker/styles/TimePicker.css';
4
5
6const { formatDate } = dateKit;
7const [panelSnapTime, setPanelSnapTime] = useState<Date | null>(null);
8const [panelSnapTimeOpen, setPanelSnapTimeOpen] = useState(false);
9
10<div>
11  <span>선택된 날짜/시간:</span>
12  <button onClick={() => setPanelSnapTimeOpen(true)}>
13      {formatDate(panelSnapTime, 'A hh:mm:ss') || "시간을 선택하세요"}
14  </button>
15</div>
16
17
18<TimePicker
19  mode="panel"
20  value={panelSnapTime}
21  onChange={setPanelSnapTime}
22  isOpen={panelSnapTimeOpen}
23  timeUnits={['hour', 'minute', 'second', 'ampm']}
24  onOpenChange={setPanelSnapTimeOpen}
25  enableSnap
26/>
🎯

TimePicker Examples

⏰

TimePicker - Default

기본적인 시간 선택기입니다. 시, 분, 초를 개별적으로 선택할 수 있는 휠 형태의 인터페이스를 제공합니다.

선택된 시간:

주요 기능

  • 24시간 형식
  • 휠 스크롤 UI
🕐

TimePicker - Panel + Snap

패널 모드의 시간 선택기로 스냅 기능이 포함되어 있습니다. AM/PM 형식도 지원합니다.

선택된 시간:

주요 기능

  • AM/PM 12시간 형식
  • 패널 모드 UI
  • 스냅 기능