시작하기
설치 단계와 이 플러그인의 전체 마크다운 가이드를 포함한 설정 프롬프트를 복사하세요.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-date-picker`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/date-picker/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
설치
설치 제목AI-Assisted Setup을 사용하여 플러그인을 설치할 수 있습니다. AI 도구에 Capgo 기능을 추가하려면 다음 명령어를 사용하세요:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins만약 Manual Setup을 선호한다면, 플러그인을 설치하기 위해 다음 명령어를 실행하고 아래에 플랫폼에 따라 설명된 지침을 따르세요:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-date-picker` plugin in my project.설치, 동기화 및 설명서 마크다운 설명서가 포함됩니다.
npm install @capgo/capacitor-date-pickernpx cap sync수입
수입 섹션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',});
console.log(result.value);날짜 및 시간 선택
날짜와 시간을 선택하세요const result = await DatePicker.present({ mode: 'dateAndTime', date: '2026-05-27T14:30:00', format: "yyyy-MM-dd'T'HH:mm:ss", title: 'Select date and time',});월을 선택하세요
날짜와 시간을 선택하세요const result = await DatePicker.present({ mode: 'yearAndMonth', date: '2026-05-01', format: 'yyyy-MM', title: 'Select month',});기간을 선택하세요
기간을 선택하세요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, range.value);선택기 숨기기
클립보드에 복사await DatePicker.hide();플랫폼 옵션
플랫폼 옵션await DatePicker.present({ mode: 'date', date: '2026-05-27', title: 'Select date', ios: { style: 'inline', theme: 'light', }, android: { theme: 'light', },});일반 옵션
일반 옵션| 옵션 | 설명 |
|---|---|
mode | date, time, dateAndTime, yearAndMonth, countDownTimer또는 range. |
date | __CAPGO_KEEP_0__ |
min / max | __CAPGO_KEEP_1__ |
format | __CAPGO_KEEP_2__ |
title | 출력 형식. ISO, Java/Unicode, Moment-style 형식이 지원됩니다. |
locale | 대화 상자 제목 |
timezone | 시간대는 날짜 및 시간의 파싱 및 형식 지정에 사용됩니다. |
is24h | 24시간 형식이 선호됩니다. |
minuteStep | 시간 선택기 분 간격. |
doneText / cancelText | 사용자 정의 액션 레이블. |
예제 앱
‘예제 앱’이라는 섹션 제목.저장소에는 Capacitor 예제 앱이 포함되어 있습니다. 이 앱은 네이티브 날짜 선택기, 시간 선택기, 범위 선택기, 및 플러그인 버전 호출을 열고 있습니다. hide()iOS
| 안드로이드 | iOS의 애니메이션 데모 @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-date-picker가 날짜를 선택하고 닫히는 것을 보여줍니다. |
|---|---|
![]() | ![]() |
API 참고 자료
API 참고 자료 제목API 참고 자료는 패키지 README 및 TypeScript 정의에서 유지됩니다.:

