Guide
Capacitor를 사용하는 방법
__CAPGO_KEEP_0__ 앱을 다운로드한 후 QR __CAPGO_KEEP_1__를 스캔하세요.
Capgo 앱을 다운로드하고 QR code 코드를 스캔하세요.
@capgo/capacitor-date-picker을 사용하면
@capgo/capacitor-date-picker iOS 및 Android에서 Capacitor 앱에 native 날짜, 시간, 날짜-시간, 년-월, 및 범위 선택기를 추가하고, Web fallback을 매칭합니다.
이것은 Capgo의 유지보수된 대체입니다. @capacitor-community/date-picker이것은 GitHub의 유지보수된 대체입니다.
설치
npm install @capgo/capacitor-date-picker
npx cap sync
네이티브 픽커 데모
| iOS | Android |
|---|---|
 |
 |
원본 픽커 스크린샷
| 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);
활성 픅커 닫기
await DatePicker.hide();
해결하는 문제
- Capacitor 8 지원.
- Web 구현과 동일한
present()API. - 프로그래밍 방식
hide(). - Dialog 제목 지원.
- iOS 회전 안전한 레이아웃, 지역 설정, 및 모드.
yearAndMonthmode. - Android 중첩 옵션,
- , dialog 레이아웃 처리, 및 UI-스레드 dialog 처리.
is24h분 단위 단계와 날짜 범위 선택. - Full Reference
전체 참조
- GitHub: https://github.com/Cap-go/capacitor-date-picker/
- 문서: /docs/plugins/date-picker/