@capgo/capacitor-date-picker 사용하기
@capgo/capacitor-date-picker iOS 및 Android의 Capacitor 앱에 네이티브 날짜, 시간, 날짜-시간, 년-월, 범위 선택기를 추가하며, Web 환경을 위한 폴백도 지원합니다.
이것은 Capgo에서 관리하는 @capacitor-community/date-picker의 대안입니다. 커뮤니티 피드백을 경청하고 문제를 빠르게 해결하며, GitHub 이슈를 방치하는 대신 지속적으로 업데이트를 배포합니다.
설치
npm install @capgo/capacitor-date-picker
npx cap sync
Native Picker 데모
| iOS | Android |
|---|---|
 |
 |
Native Picker 스크린샷
| iOS | Android |
|---|---|
 |
 |
날짜 선택
import { DatePicker } from '@capgo/capacitor-date-picker';
const result = await DatePicker.present({
mode: 'date',
date: '2026-05-27',
min: '2026-01-01',
max: '2026-12-31',
format: 'yyyy-MM-dd',
title: 'Select date',
});
console.log(result.value);
시간 선택
const result = await DatePicker.present({
mode: 'time',
is24h: true,
minuteStep: 15,
format: 'HH:mm',
title: 'Select time',
});
날짜 범위 선택
const range = await DatePicker.presentRange({
start: '2026-05-01',
end: '2026-05-27',
format: 'yyyy-MM-dd',
startTitle: 'Start date',
endTitle: 'End date',
});
console.log(range.start, range.end);
활성화된 Picker 닫기
await DatePicker.hide();
수정 사항
- Capacitor 8 지원.
- 동일한
present()API. - 프로그래밍 방식의
hide(). - 다이얼로그 타이틀 지원.
- iOS 회전 대응 레이아웃, 로케일 처리 및
yearAndMonth모드 지원. - 더 안전한 날짜 파싱 및 날짜 전용 타임존 처리.
- Android 중첩 옵션,
is24h, 다이얼로그 레이아웃 처리 및 UI 스레드 다이얼로그 처리. - 분 단위 간격 및 날짜 범위 선택.
전체 레퍼런스
- GitHub: https://github.com/Cap-go/capacitor-date-picker/
- 문서: /docs/plugins/date-picker/